使用elementUI的upload上传文件,用自定义请求(FormData)覆盖默认action
微wx笑 2021-02-26【前端开发】 6 0关键字: elementUI upload FormData action
在处理文件上传的时候,我们可能还需要提交额外的参数,这时就需要使用 http-request 覆盖默认的上传行为,可以自定义上传的实现。
在处理文件上传的时候,我们可能还需要提交额外的参数,这时就需要使用 http-request 覆盖默认的上传行为,可以自定义上传的实现。
template
<el-form-item label-width="180px" label="组织Logo:" class="postInfo-container-item"> <el-input v-model="postForm.orgLogoUrl" placeholder="组织Logo,只能是 JPG 格式,大小不能超过 2MB!" /> <el-upload class="avatar-uploader" :action="" :http-request="handleRequest" :show-file-list="false" :on-success="handleLogoSuccess" :before-upload="beforeLogoUpload" > <img v-if="postForm.orgLogoUrl" :src="postForm.orgLogoUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon" /> </el-upload> </el-form-item>
script
<script> export default { name: "TestUpload", data() { return { fileList: [], } }, methods: { /** * 上传的文件个数超出限制时触发的钩子 * @param files * @param fileList */ handleExceed(files, fileList) { this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); }, sendFile() { this.$refs.fileUpload.submit(); }, handleLogoSuccess(res, file) { this.postForm.orgLogoUrl = res.data }, beforeLogoUpload(file) { const isJPG = file.type === 'image/jpeg' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG) { this.$message.error('上传组织Logo图片只能是 JPG 格式!') } if (!isLt2M) { this.$message.error('上传组织Logo图片大小不能超过 2MB!') } return isJPG && isLt2M }, /** * 覆盖默认的上传文件,自定义实现文件上传 */ handleRequest(params) { console.log("request", params); let formData = new FormData(); formData.append("file", params.file); // ArchiveImportHttpService.uploadFile({ // userId: window.$config.userId, // appId: window.$config.appId, // req: formData // }).then(({data}) => { // console.log(data); // }).catch(err => { // console.log(err); // }) }, /** * 文件列表移除文件时的钩子 * @param file * @param fileList */ handleRemove(file, fileList) { console.log("remove", file, fileList); }, /** * 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 * @param file */ handleChange(file) { this.file2JSON(file).then(data => { // data对象的每个元素就是excel文件的每个sheet页的数据 console.log(data); }).catch(err => { console.log(err); }) }, /** * 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 * @param file * @param fileList * @return {Promise<MessageBoxData> | *} */ handleBeforeRemove(file, fileList) { return this.$confirm(`确定移除 ${file.name}?`); }, /** * 使用xlsx将excel文件对象转换成json格式 * @param file * @return {Promise<unknown>} */ file2JSON(file) { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.onload = function (event) { let resSheet = XLSX.read(event.target.result, { type: "binary" }); let resJSON = []; resSheet.SheetNames.forEach(sheetName => { resJSON.push({ sheetName: sheetName, sheet: XLSX.utils.sheet_to_json(resSheet.Sheets[sheetName]) }); }); resolve(resJSON); }; reader.readAsBinaryString(file.raw); }); } } } </script>
style
<style> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: auto; height: 100px; line-height: 100px; text-align: center; } .avatar { width: auto; height: 100px; display: block; } </style>
本文由 微wx笑 创作,采用 署名-非商业性使用-相同方式共享 4.0 许可协议,转载请附上原文出处链接及本声明。
原文链接:https://www.ivu4e.cn/blog/front/2021-02-26/622.html