<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>test(){ this.fd = new FormData(); // 新建一个FormData()对象,这就相当于你新建了一个表单
------------------------------------------------------------------------------------------------------
js部分
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对象中 },
关键点:
标签:el,console,log,upload,fd,file,上传,fileObject From: https://www.cnblogs.com/brillant/p/17471625.html