Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use element+vuedraggable to achieve picture upload drag-and-drop sorting related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this article on how to use element+vuedraggable to achieve picture upload drag-and-drop sorting, let's take a look.

The specific code is as follows

Import draggable from 'vuedraggable'import {imgUpload} from' @ / api/upload'import {MathRandom} from'@ / utils/auth'import {promises} from 'fs'export default {name:'Upload', data () {return {dialogImageUrl:', uploadLoading:false, dialogVisible: false, disabled: false, fileList: [], imgUploadUrl:imgUpload () Arrs: []}}, props: {value: {type: () = > [], default () {return []}}, max: {type: [Number,String], default:9} Disabled: {type:Boolean, default:false}}, model: {event: 'giveActive'}, computed: {isUploadBtn () {return this.value.length {this.value.splice (index,1) this.fileList.splice (index 1) this.go ()}) .catch (() = > {}) }, onChange (file,fileList) {this.fileList = fileList}, handlePictureCardPreview (file) {this.uploadLoading = true}, onExceed (files, fileList,props) {this.$message ({message: `exceeds the maximum number of uploads. A maximum of ${this.max} images can be uploaded` Type:'error'})}, handleSuccess (response, file,fileList) {this.uploadLoading = false this.urlList (response)}, urlList (res) {const obj= {id:MathRandom (), url:res.data.data, status:'success' Uid:MathRandom ()} if (this.value.length

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.