前端时间写到自定义上传记录一下:
vue 2.x
node -v 12.14
element-ui 2.14.1
<el-upload
class="upload-demo"
drag
ref="uploadFileRef"
action="xxx"
:limit='200'
:auto-upload = 'false'
:http-request="uploadSectionFile"
:file-list="uploadFileList"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em>
<div>{{filterFileInfo}},单次最多可上传200个文件</div>
</div>
</el-upload>
<el-button type="primary" @click="submitUpload()">确 定</el-button>
data () {
return {
uploadFileList: [],
// 需要上传文件的总数
uploadFileCountAll: 0,
// 上穿完成的文件数目
uploadedFileCount: 0
}
}
// 自定义formdata 上传
uploadSectionFile (content) {
const uploadData = new FormData();
uploadData.append('file', content.file);
uploadData.append('userId', this.userId);
uploadData.append('resourceType', this.resourceType);
uploadData.append('resourceLibrary', this.getResourceLibrary(this.setSelectFolderInfo[0]));
uploadData.append('resourceLibraryCode', this.setSelectFolderInfo[0]);
uploadData.append('resourceFolder', this.setSelectFolderInfo[1]);
uploadResource(uploadData).then(res => {
this.uploadedFileCount++;
if (this.uploadedFileCount >= this.uploadFileCountAll) {
this.loading = false;
// 在刷新的 emit 中有关闭弹窗的功能。
this.$emit('closeUploadDialog');
}
});
},
// 确定上传
submitUpload () {
this.loading = true;
this.uploadFileCountAll = this.uploadFileList.length;
this.$refs.uploadFileRef.submit();
},
接口页面:
// 上传资源文件
export function uploadResource (param) {
return http.post('/api/resource/upload', param);
}