# 第一种：手动上传不用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> ```