# 第一種：手動上傳不用action使用http-request來上傳 ## 當需求是流程分別要上傳附件的時候，流程是for循環對應每個流程都要上傳附件 **HTML** ``` <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item :title="item.stepName" :name="index" v-for="(item , index) in planData" :key="index" @click.native="aaa(item.id)"> <el-upload ref="getUpload" action="#" :file-list="item.fileslist" :auto-upload="false" :multiple="true" :http-request="ReceiptUpload" :on-preview="handlePreview" :before-remove="beforeRemove" :on-remove="handleRemove" > <el-button slot="trigger" size="mini" type="primary" @click="getId(item.id)">選取文件</el-button> <el-button size="mini" type="primary" @click="fjupload(index)">上傳文件</el-button> </el-upload> </el-collapse-item> </el-collapse> ``` **JS** ``` //提交上傳 ReceiptUpload(params) { console.log(params) let _file = params.file let formData = new FormData formData.append('file', _file) recruituploadFlies(this.recruitPathId,formData).then(res => { console.log(res) this.$message({ type: 'success', message: '上傳成功' }); params.onSuccess() // 上傳成功的圖片會顯示綠色的對勾 }).catch(response => { console.log('圖片上傳失敗') this.$message({ type: 'danger', message: '上傳失敗' }); params.onError() }) }, fjupload(v){ this.$nextTick(() => { console.log(this.$refs.getUpload[v].submit()) this.$refs.getUpload[v].submit() //this.$refs.getUpload.submit() }) }, ``` **this.$nextTick(() => {})一定要加，因為在for循環的時候$ref的值會獲取不到** # 第二種：用action上傳，也是通過每個流程去上傳附件 ``` <template> <div style="padding:30px;"> <div> <ul v-for="(item, index) in processList" :key="item.id" class="test"> <li>{{ item.title }}</li> <el-upload class="upload-demo" :action="getAction(item.id)" :on-success="function onSuccess(response, file, fileList) {return handleSuccess(response, file, fileList, index)}" :on-remove="function onRemove(file, fileList) {return handleRemove(file, fileList, index)}" :on-preview="handlePreview" multiple :limit="3" :file-list="item.fileList" > <el-button size="small" type="primary">點擊上傳</el-button> </el-upload> </ul> <!-- <el-button v-print="printObj" type="primary">v-print</el-button> --> <el-button type="primary" @click="handleSave">保存</el-button> </div> <el-dialog title="文件預覽" :visible.sync="dialogVisible2" width="50%" > <div> <img :src="imgUrl" alt=""> </div> </el-dialog> </div> </template> <script> export default { data() { return { imgUrl: '', dialogVisible2: false, processList: [ { id: 1, title: '流程1', fileList: [] }, { id: 2, title: '流程2', fileList: [] }, { id: 3, title: '流程3', fileList: [] } ] } }, created() { }, methods: { // 獲取上傳地址 getAction(id) { return `/dev-api/vue-element-admin/upload/file?id=${id}` }, // 上傳成功 handleSuccess(response, file, fileList, index) { // console.log('success', response, file, fileList, index) this.processList[index].fileList = fileList }, // 刪除文件 handleRemove(file, fileList, index) { // console.log('remove', file, fileList, index) this.processList[index].fileList = fileList }, // 文件預覽 handlePreview(file) { this.imgUrl = file.response.data.file this.dialogVisible2 = true }, // 提交 handleSave() { console.log(this.processList) } } } </script> <style scoped lang="scss"> .imglist { width: 500px; padding-top: 20px; .rbut { float: right; } } .test li { padding: 20px 0; } </style> ```