Demand scenarios
The requirements require uploading pictures while sorting them, using element uploading pictures, dragging and dropping using vuedraggable plug-in, record it
Drag and drop plug-in
Plugin Chinese translation git address:/itmier/, please visit the address for details
Install and use the vuedraggbale plug-in:
- 1. Install the plug-in
npm i -S vuedraggable
- 2. Locally introduce plug-ins (in the .vue file);
import draggable from 'uedraggbale'
components: {draggable},
- 3. Use plug-ins
//imgList: the data array of the image,<draggable v-model="imgList"
:animation="1000">
<div v-for="item in imgList" :key="">{{}}</div>
</draggable>
el-upload file upload component
// To match the style of the element itself, there is no need to write styles. All codes <template>
<div class='base-updata'>
<div class="img-sort">
<ul class="el-upload-list el-upload-list--picture-card">
<draggable
v-model="imgList"
:animation="1000"
:sort="true"
v-if="showDraggable"
>
<li
class="el-upload-list__item is-success animated"
v-for="(item, index) in imgList"
:key="index"
style="margin-right:10px"
>
<img
:src=""
alt=""
class="el-upload-list__item is-success"
>
<!-- <i class="el-icon-close"></i> -->
<span class="el-upload-list__item-actions">
<!-- Preview -->
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(item)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- delete -->
<span
class="el-upload-list__item-delete"
@click="handleRemove(index)"
v-if="!disabled">
<i class="el-icon-delete"></i>
</span>
</span>
</li>
</draggable>
<template v-else>
<li
class="el-upload-list__item is-success animated"
v-for="(item, index) in imgList"
:key="index"
style="margin-right:10px"
>
<img
:src=""
alt=""
class="el-upload-list__item is-success"
>
<i class="el-icon-close"></i>
<span class="el-upload-list__item-actions">
<!-- Preview -->
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(item)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- delete -->
<span
class="el-upload-list__item-delete"
@click="handleRemove(index)"
v-if="!disabled"
>
<i class="el-icon-delete"></i>
</span>
</span>
</li>
</template>
</ul>
<el-upload
style="display: inline-block"
ref="uploadFilemain"
:show-file-list="false"
:file-list="imgList"
list-type="picture-card"
:before-upload="beforeUpload"
:http-request="(file, fileList) => requestImgHttps(file)"
:on-preview="handlePictureCardPreview"
:limit="limit"
:disabled="disabled"
:class=" == limit ? 'mf' : ''"
>
<!-- :disabled="optType == 'detail'" -->
<i class="el-icon-plus"></i>
</el-upload>
<span style="position: relative; top: 116px; left: 10px">{{ }} <span v-if="limit
!=100">{{"/" + limit}}</span> <span v-if="showDraggable">（Drag and drop sort）</span></span>
</div>
<!-- 图片Preview -->
<el-dialog :="dialogVisible">
<img
width="100%"
:src="dialogImageUrl"
alt=""
/>
</el-dialog>
</div>
</template><script>
import draggable from "vuedraggable";
export default {
name: "base-updata",
components: {draggable},
props: {
//Picture List imgList: {
type: Array,
default: () => {
return [];
},
},
//Does drag and drop display showDraggable: {
type: Boolean,
default: () => {
return false;
},
},
//Upload the image signature imgTypeName: {
type: String,
Request: true,
},
//Upload the image and subscript imgTypeIdex: {
type: Number,
Request: true,
},
//Picture Limitations limit: {
type: Number,
default: () => {
return 100;
},
},
//Pictures are prohibited disabled: {
type: Boolean,
default: () => {
return false;
},
},
},
data() {
return {
dialogVisible: false, //Picture Preview };
},
created() {},
mounted() {},
methods: {
//Picture upload verification beforeUpload(file) {
return new Promise((resolve, reject) => {
(file).then((res) => {
= res;
if () {
return resolve(true);
} else {
return reject(false);
}
});
});
},
changeLimt(file) {
const _this = this;
const isSize = new Promise(function (resolve, reject) {
const _URL = || ;
const img = new Image();
= _URL.createObjectURL(file);
= function () {
let e_width = >= 600 && <= 1200;
let e_height = >= 600 && <= 1200;
if ( == "image/png" || == "image/jpg" || == "image/jpeg") {
const valid = e_width && e_height;
if (valid) {
return resolve();
} else {
return reject();
}
} else {
return reject();
}
};
}).then(
() => {
return true;
},
() => {
_this.$({
message: "The picture specification is jpg or png, it is recommended to have square shapes, and the size is recommended to be 800*800 pixels, and the maximum support is 1200*1200 pixels",
btn: false,
});
return false;
}
);
return isSize;
},
//Preview handlePictureCardPreview(file) {
= ;
= true;
},
//delete handleRemove(index) {
this.$emit("handleRemove", , index);
},
/**
* Upload image Request
* @param {string} file picture file
* @param {string} imgTypeName Image signature
* @param {string} imgTypeIdex Picture location subscript
* @return {Function} throws the function requestImgHttps
*/
requestImgHttps(file) {
this.$emit("requestImgHttps", file, , );
},
},
};
</script><style lang='scss' scoped>
.img-sort {
display: flex;
flex-wrap: wrap;
}
.mf {
::v-deep .el-upload--picture-card {
display: none !important;
}
}
</style>Usage Components
<el-form-item label="Product Carousel Picture:" prop="images_circulate" >
<upload-img
:imgList="formInfo.images_circulate"
:limit="5"
:showDraggable="true"
:imgTypeName="`swiperImg`"
@handleRemove="handleRemove"
@requestImgHttps="requestImgHttps"
:disabled="$ == 3?true:false"
></upload-img>
</el-form-item>
//Delete the picture handleRemove(type, index) {
switch (type) {
//Delete the carousel image case "swiperImg":
.images_circulate.splice(index, 1);
break;
default:
break;
}
},
//Upload pictures requestImgHttps(file, key, index) {
var formdata = new FormData();
("img", );
switch (key) {
case "mainImg":
(formdata).then((res) => {
if ( == 200) {
let ob = { name: "", url: };
.image_main.push(ob);
} else {
thi s.$message({
type: "warning",
message: ,
});
}
});
break;
default:
break;
}
},Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.