vue和element上传图片以及进行拖拽图片排序问题
作者：ing*_*
这篇文章主要介绍了vue和element上传图片以及进行拖拽图片排序问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
需求场景
需求要求进行上传图片的同时进行排序，使用element的上传图片，拖拽使用的是vuedraggable的插件，记录下
拖拽插件
插件中文翻译git地址：https://github.com/itmier/Vue.Draggable，具体可去地址浏览
对vuedraggbale的插件进行安装使用：
- 1.安装插件
npm i -S vuedraggable
- 2.局部引入插件(在.vue的文件中)；
import draggable from 'uedraggbale'
components: {draggable},
- 3.使用插件
//imgList：图片的数据数组，
<draggable v-model="imgList"
:animation="1000">
<div v-for="item in imgList" :key="item.id">{{item.name}}</div>
</draggable>
el-upload上传文件组件
// 配合element的本身的样式，不用写样式。全部代码
<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="item.url"
alt=""
class="el-upload-list__item is-success"
>
<!-- <i class="el-icon-close"></i> -->
<span class="el-upload-list__item-actions">
<!-- 预览 -->
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(item)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- 删除 -->
<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="item.url"
alt=""
class="el-upload-list__item is-success"
>
<i class="el-icon-close"></i>
<span class="el-upload-list__item-actions">
<!-- 预览 -->
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(item)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- 删除 -->
<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="imgList.length == limit ? 'mf' : ''"
>
<!-- :disabled="optType == 'detail'" -->
<i class="el-icon-plus"></i>
</el-upload>
<span style="position: relative; top: 116px; left: 10px">{{ imgList.length }} <span v-if="limit
!=100">{{"/" + limit}}</span> <span v-if="showDraggable">（拖拽排序）</span></span>
</div>
<!-- 图片预览 -->
<el-dialog :visible.sync="dialogVisible">
<img
width="100%"
:src="dialogImageUrl"
alt=""
/>
</el-dialog>
</div>
</template><script>
import draggable from "vuedraggable";
export default {
name: "base-updata",
components: {draggable},
props: {
//图片列表
imgList: {
type: Array,
default: () => {
return [];
},
},
//是否显示拖拽
showDraggable: {
type: Boolean,
default: () => {
return false;
},
},
//上传图片署名
imgTypeName: {
type: String,
Request: true,
},
//上传图片下标
imgTypeIdex: {
type: Number,
Request: true,
},
//图片限制
limit: {
type: Number,
default: () => {
return 100;
},
},
//图片禁止
disabled: {
type: Boolean,
default: () => {
return false;
},
},
},
data() {
return {
dialogVisible: false, //图片预览
};
},
created() {},
mounted() {},
methods: {
//图片上传验证
beforeUpload(file) {
return new Promise((resolve, reject) => {
this.changeLimt(file).then((res) => {
file.isFlag = res;
if (file.isFlag) {
return resolve(true);
} else {
return reject(false);
}
});
});
},
changeLimt(file) {
const _this = this;
const isSize = new Promise(function (resolve, reject) {
const _URL = window.URL || window.webkitURL;
const img = new Image();
img.src = _URL.createObjectURL(file);
img.onload = function () {
let e_width = img.width >= 600 && img.width <= 1200;
let e_height = img.height >= 600 && img.height <= 1200;
if (file.type == "image/png" || file.type == "image/jpg" || file.type == "image/jpeg") {
const valid = e_width && e_height;
if (valid) {
return resolve();
} else {
return reject();
}
} else {
return reject();
}
};
}).then(
() => {
return true;
},
() => {
_this.$message.warning({
message: "图片规格为jpg或png，建议形状正方形，尺寸建议800*800像素，最大支持1200*1200像素",
btn: false,
});
return false;
}
);
return isSize;
},
//预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//删除
handleRemove(index) {
this.$emit("handleRemove", this.imgTypeName, index);
},
/**
* 上传图片 请求
* @param {string} file 图片文件
* @param {string} imgTypeName 图片署名
* @param {string} imgTypeIdex 图片位置下标
* @return {Function} 抛出函数requestImgHttps
*/
requestImgHttps(file) {
this.$emit("requestImgHttps", file, this.imgTypeName, this.imgTypeIdex);
},
},
};
</script><style lang='scss' scoped>
.img-sort {
display: flex;
flex-wrap: wrap;
}
.mf {
::v-deep .el-upload--picture-card {
display: none !important;
}
}
</style>使用组件
<el-form-item label="商品轮播图：" prop="images_circulate" >
<upload-img
:imgList="formInfo.images_circulate"
:limit="5"
:showDraggable="true"
:imgTypeName="`swiperImg`"
@handleRemove="handleRemove"
@requestImgHttps="requestImgHttps"
:disabled="$route.query.type == 3?true:false"
></upload-img>
</el-form-item>
//图片删除
handleRemove(type, index) {
switch (type) {
//轮播图删除
case "swiperImg":
this.formInfo.images_circulate.splice(index, 1);
break;
default:
break;
}
},
//图片上传
requestImgHttps(file, key, index) {
var formdata = new FormData();
formdata.append("img", file.file);
switch (key) {
case "mainImg":
this.uploadFile(formdata).then((res) => {
if (res.code == 200) {
let ob = { name: "xxx.jpg", url: res.data };
this.formInfo.image_main.push(ob);
} else {
thi s.$message({
type: "warning",
message: res.msg,
});
}
});
break;
default:
break;
}
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。