el-upload手动上传多个文件
<el-upload class="upload-demo" ref="uploadsss" multiple action="https://jsonplaceholder.typicode.com/posts/" :headers="upload.headers" :auto-upload="false" list-type="picture-card" :accept="acceptType" :file-list="fileList" :http-request="handleFileUpload" :on-change="(file, fileList) => {handelOnChange(file, fileList)}"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <el-popover placement="top" width="70" trigger="hover"> <div style="display: flex;justify-content: space-around;"> <el-link type="primary" :underline="false" @click="handlePictureCardPreview(file)">预览</el-link> <el-link type="primary" :underline="false" @click="handleRemove(file,scope)">删除</el-link> </div> <!-- pdf格式 --> <img slot="reference" class="el-upload-list__item-thumbnail" src="../../../../assets/images/pdf.png" alt="" v-if="file.name.indexOf('.pdf') >= 0" > <!-- 图片格式 --> <img slot="reference" class="el-upload-list__item-thumbnail" :src="file.url" alt="" v-else > </el-popover> </div> </el-upload>
------------------------------------------------------------------------------------------------------
js部分
test(){
this.fd = new FormData(); // 新建一个FormData()对象,这就相当于你新建了一个表单
this.$refs.uploadsss.submit()
request({
url:'/project/management/uploads',
method:'post',
headers:{
ContentType:'multipart/form-data'
},
data:this.fd
}).then(res => {
console.log('文件上传成功')
console.log(res)
})
},
async handleFileUpload(fileObject){
console.log(fileObject)
this.fd.append("file", fileObject.file); // 将文件保存到formData对象中
},
关键点:
或者通过以下方式上传文件