vue文件上传文档
<el-uploadclass="uploaddemo"ref="upload" action=""name="uploadFiles":multiple="true":limit="uploadFileLimit":file-list="form.fileList":data=’’...
<el-upload class="uploaddemo" ref="upload" action="" name="uploadFiles" :multiple="true" :limit="uploadFileLimit" :file-list="form.fileList" :data=’’ :on-change='changeFlies' :on-exceed='handleExceed' :on-success="successUpload" :before-remove="beforeRemove" :auto-upload="false"> <i class="upload iconfont iconjiafujian" style="top: -8px;right: 0px;"></i> </el-upload> |
<script> export default { data() { return { fileList: [], uploadFileLimit:0, form: { fileList: [], }, deleteFileList:[], //文件被删除的ID的数组 }; }, |
methods: { //上传文件,成功,失败调用的方法 changeFlies(file, fileList){ var self = this; self.uploadFileStatus = true; let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name); let isLt5M = file.size / 1024 / 1024 < self.uploadFileSize; if (existFile) { this.$message.error('当前文件已经存在!'); fileList.pop(); } if (!isLt5M) { this.$message.error(`上传的文件大小不能超过 ${self.uploadFileSize}MB!`); fileList.pop(); } self.form.fileList = fileList; }, handleExceed(files, fileList) { this.$message.warning(‘当前限制选择${this.uploadFileLimit} 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); }, //貌似没用啊 successUpload(response, file, fileList){ var self = this; self.emptyInput(); self.$emit('sumitORCancelEdit','1'); self.uploadFileStatus = true; }, //点击文件后面的”X”,就调用的事件 beforeRemove(file, fileList) { var self = this; self.form.fileList = fileList; //删除后剩的的文件数组 self.deleteFileList.push(file.fileId); // 把删除的文件ID 保存一下,如果是更新的话,把这个传给后台,告诉他前台删了哪个文件 }, submitCreate(){ var self = this; self.loading = true; var formData = new FormData(); //增加其他的参数 formData.append("clueTitle", self.form.clueTitle); //如果是编辑的话,传递要删除文件的ID if(self.deleteFileList && self.deleteFileList.length > 0){ formData.append("delFilesId", self.deleteFileList); }
if(self.uploadFileStatus && self.form.fileList.length > 0){ for (var i = 0; i < self.form.fileList.length; i++) { if(self.form.fileList[i].raw){ // raw是文件格式 formData.append("uploadFiles", self.form.fileList[i].raw); } } ******Api.save(formData).then(res => { }); },
} </script> |
上传后文件的数组内的详情:
|
save(params) { var url = "" var config = { withCredentials: true, headers: { "Content-Type": 'multipart/form-data' } } return AxiosUtil.post(url, params, config).then(response => { return response }, err => { return err }); }, |
更多推荐
所有评论(0)