Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to achieve vue+element-ui+axios multi-file upload and show the overall progress of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

Element-ui+axios multi-file upload and show progress

Element-ui 's own multi-file upload is made into multiple file uploads, the company needs to select multiple files to upload all at once.

Code part

Drag the file here, or click upload to support uploading jpg/png/gif files And no more than 100m upload to the server to clear import axios from 'axios'export default {data () {return {maxUploadSize: 10, progressFlag: false, progressPercent: 10, innerVisible: false, fileList: [], isViewDisabled: false FormData: {}, param: {} / / main parameters for uploading files}}, methods: {submitUpload () {if (this.fileList.length)

< 1) { this.$message.warning('请选择文件!') return false } this.$refs.uploadMul.submit() if (this.param instanceof FormData) { // 附加参数 this.param.append('expirationsec', 0) this.param.append('fileproperty', 'publicfiles') // const config = { // headers: { 'content-type': 'multipart/form-data' } // } // axios.post('/api/oss/ossUploadObject', this.param, config).then(res =>

{/ / if (res.status = = 200 & & res.data.status = = 200) {/ / this.$message.success ('upload successful!') / / let result = res.data.body.data / / console.log (result) / /} / / this.$refs.uploadMul.clearFiles () / / this.param = {} ) let that = this that.progressFlag = true axios ({url:'/ api/oss/ossUploadObject') Method: 'post', data: that.param, headers: {' Content-Type': 'multipart/form-data'} OnUploadProgress: progressEvent = > {/ / progressEvent.loaded: size of uploaded files / / progressEvent.total: total size of uploaded files / / progress bar that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) .tofixed (0) | 0}}) .then (res = > {this.param = {} this.fileList = [] console.log (res) if (res.data.status = 200 & & that.progressPercent = 100) {setTimeout (function () {that.$message ({message: 'upload successful!' , type: 'success', duration:' 2000'}) that.progressFlag = false that.progressPercent = 0 that.$refs.uploadMul.clearFiles ()} 1000) let result = res.data.body.data console.log (result)} else {setTimeout (function ()) {that.$message ({message: res.data.msg, type: 'error' Duration: '2000'}) that.progressFlag = false that.progressPercent = 0 that.$refs.uploadMul.clearFiles ()} 1000)}}). Catch (() = > {that.progressFlag = false that.progressPercent = 0 that.$refs.uploadMul.clearFiles () that.$message ({message: 'upload failed!' , type: 'error', duration:' 2000'})} else {console.log (this.param instanceof FormData)}}, handleRemove (file, fileList) {this.$message.warning (`Files removed: ${file.name}! `) / / each file removed Param reassigns this.param = new FormData () this.fileList = [... fileList] this.fileList.forEach ((file, index) = > {this.param.append (`file`, file.raw) / / rename a single file Storage (to background)}}, uploadChange (file, fileList) {/ / const videoType = ['image/gif',' image/png', 'image/jpeg',' video/mp4', 'video/flv',' video/avi' 'video/rmvb'] / / if (videoType.indexOf (file.raw.type) =-1) {/ / this.$message.error (`does not support this file format ${file.raw.type}`) / / this.$refs.uploadMul.clearFiles () / / return false / /} this.param = new FormData () this.fileList = [. FileList] this.fileList.forEach ((file) Index) = > {this.param.append (`file`, file.raw) / / rename a single file Store (to backend)}}, / / call uploadLimit (files, fileList) {this.$message.error (`maximum ${this.maxUploadSize} files allowed to upload at the same time! `) / / files.forEach ((file, index) = > {/ / console.log (index) / /})}, beforeUpload (file) {} when the number of uploads exceeds UploadFile (file) {/ / this method needs to exist to prevent element-ui reporting 404exception} when empty action, clearFiles () {this.fileList = [] this.param = {} this.$refs.uploadMul.clearFiles ()}, / / initialize form data init () {}}

Back-end code (analog)

@ RequestMapping ("/ oss/ossUploadObject") public ApiResponse uploadObject (@ RequestParam ("file") MultipartFile [] file, FileVo fileVo) {/ /... code FileDto dto = new FileDto (); dto.setUrl (""); dto.setFileId (""); return ApiResponse.success (FileDto);} solve the business scenario of element ui multi-file upload

When using vue+elementui to upload files, I found that the components given on the official website upload automatically every time, and upload one file at a time. But my actual business is to upload multiple files at a time.

Solution.

Front-end code:

Only jpg/png files can be uploaded, and do not exceed 500kb

Click to view filelist submission import upload from "@ / api/upload" import request from "@ / utils/request" export default {data () {return {param: new FormData (), form: {}, count:0, list: [], dialogVisible:false, dialogImageUrl:'', BASE_API: process.env.BASE_API, / / Interface API address} }, methods: {handlePreview (file) {this.dialogImageUrl = file.url; this.dialogVisible = true;}, beforeRemove (file, fileList) {return this.$confirm (`OK to remove ${file.name}? `) }, OnChange (file,fileList) {console.log (fileList) this.list=fileList}, OnRemove (file,fileList) {this.list=fileList}, fun () {console.log ('- -') console.log (this.list)} OnSubmit () {/ / this.form= {/ / let x in this.form 1, / / for 2, / / this.param.append 3 / /} / / let file='' / / for (let x in this.form) {/ / this.param.append (xmemthis.form [x]) / /} / for I {console.log (res)}) / / request.post ('/ testabc?name='+formData.get ("name")) .then (res= > {/ / console.log (res) / /}) / / upload.uploadfile (formData) .then (res= > {/ / console.log (res) / /}) / / batchTagInfo ( This.param) / / .then (res= > {/ / alert (res) / /})}

Backend interface code:

Package com.yj.wiki.controller;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile; @ RestController@CrossOriginpublic class UploadFileController {@ PostMapping ("/ upload") public String upload (MultipartFile [] files) {for (MultipartFile file: files) {System.out.println (file.getOriginalFilename ()) } return "ok";} @ PostMapping ("/ testabc") public String upload (String name) {System.out.println (name); return "ok";}} above is all the content of the article "how to upload multiple files in vue+element-ui+axios and show the overall progress". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.