The development of background business involves the uploading of multiple images, and the project adopts Element-UI. The following is the implementation of the next upload component to upload pictures to Qiniu. https://element.eleme.cn/#/zh website document…

1) Re-encapsulate the Upload component

<template> <div class="upload-wrap"> <el-upload :action="upload_qiniu_area" :auto-upload="true" :limit="3" accept="image/jpg,image/png,image/jpeg" :file-list="fileList" list-type="picture-card" :on-preview="picCardPreview" :before-upload="beforePicUpload" :on-exceed="handleExceed" :on-remove="removePic" :http-request="uploadQiniu"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl"> </el-dialog> </div> </template> <script> const upload_qiniu_address = "http://xxx.xxx.com/"; Import {getuploadToken} from './common/upload'; export default { name: "UploadPicture", data() { return { dialogImageUrl: '', dialogVisible: false, fileList: [], upload_qiniu_area: 'https://upload-z2.qiniup.com',// Upload domain name token in the upload storage area: ""}}, created() {result = bb0 {result = result.data; })); }, methods: {picCardPreview(file) {this.dialogImageUrl = file.Url; this.dialogVisible = true; }, BeforePicUpload (file) {/ / picture check const limitPic = file. Type = = = 'image/PNG' | | file. Type = = = 'image/JPG' | | file. Type = = = 'image/jpeg'; if (! LimitPic) {this.$notify.warning({title: 'warning ', message: 'please upload the format of the image/PNG image/JPG, image/jpeg images'})} const limitSize = file. The size / 1024/1024/2 < 2; if (! Warning ({title: 'warning ', message:' image size must be less than 2M'})} return limitPic && limitSize; }, removeEpic (file, fileList) {this.fileList = fileList; }, handleExceed() {this.$notify.warning({title: 'warning ', message:' upload only three images at a time ', duration: HandleUpload (request). Then ((result) = Upload(request) {if (! Result.data. key) {this.$message.error({message: 'image upload failed, please reupload ', duration: 2000}); } else { this.fileList.push({url: upload_qiniu_address + result.data.key}); this.$emit('uploadSuccess', this.fileList); }}). The catch ((err) = > {this. $message. Error ({message: ` image upload failed ${err} `, duration: 2000}); }); }, handleUpload(request) { const promise = new Promise((resolve, reject) => { const config = { headers: {'Content-Type': 'multipart/form-data'} }; let fileType = ''; if (request.file.type === 'image/jpg') { fileType = 'jpg' } else if (request.file.type === 'image/png') { fileType = 'png' } else if (request.file.type === 'image/jpeg') { fileType = 'jpeg' } const key = `front_${new Date().getTime()}${Math.floor(Math.random() * 100)}.${fileType}`; // const fd = new FormData(); fd.append('file', request.file); fd.append('token', this.token); fd.append('key', key); this.axios.post(this.upload_qiniu_area, fd, config).then(res => { if (res.status == 200 && res.data) { resolve(res); } else { reject(res); }}). The catch ((err = > {this. $message. Error ({message: failed to upload ` [${err. Status}] `, duration: 2000}); })); }); return promise; } } } </script> <style lang="less" scoped> .upload-wrap { display: flex; align-items: center; justify-content: center; margin-top: 50px; } </style>

Get the upload token

import axios from 'axios'; /** ** function getUploadToken() {return new Promise((resolve) => { axios.get('/system/get_token').then((res) => { resolve(res.data) }).catch((error) => { this.$message.error(error); }) }).catch((e) => {}); } export { getUploadToken }

2. Use components

<template> <div> <upload-picture @uploadSuccess="uploadPicSuccess"></upload-picture> </div> </template> <script> import UploadPicture from '.. /components/UploadPicture'; export default { name: "HelloWorld", components: { UploadPicture }, methods: {uploadPicSuccess(PicList) {// Todo handles business logic console.log(JSON.stringify(PicList)); }}}; </script> <style scoped> </style>

3. Achieve results



The data returned is processed according to the data format required by the interface

[{"url":"http://xxx.xxx.com/front_158424709108427.png","uid":1584247092727,"status":"success"},{"url":"http://xxx.xxx/fr ont_158424709683169.png"}]

Feel that the article is beneficial to small partners, point a like ~~