class vue 添加图片_vue+element 添加图片组件

添加图片

效果图

微信截图_20200630144419.png

微信截图_20200630144532.png

由于该组件在页面中使用位置广泛，一但在dialog中使用便会发生错误，故未添加预览功能。

子组件

:action="`${this.$store.state.uploadBefore}/api-f/file/moreuploads?siteId=${ siteId }&userId=${ userId }`"

list-type="picture-card"

name="files"

:file-list="files"

:multiple="true"

:limit="maxCount"

:on-success="handleSuccess"

:on-remove="handleRemove"

:on-exceed="handleExceed"

:disabled="disabled"

>

class="avatar-uploader"

:action="`${this.$store.state.uploadBefore}/api-f/file/moreuploads?siteId=${ siteId }&userId=${ userId }`"

name="files"

:show-file-list="false"

:on-success="handleSuccess"

:on-remove="handleRemove"

:disabled="disabled"

>

export default {

name: "UpImg",

props: {

value: {

type: String,

default: ""

},

maxCount: {

// 最大上传图片数量

type: Number,

default: 1

},

disabled: {

// 是否禁用上传组件

type: Boolean,

default: false

}

},

data() {

return {

siteId: null,

userId: null,

images: [],

files: [] // 用于图片回显使用

};

},

model: {

prop: "value",

event: "valChange"

},

watch: {

value(newVal) {

if (newVal && typeof newVal === "string") {

this.images = newVal.split(",");

if (this.maxCount > 1) {

// 回显图片

let files = [];

this.images.forEach(item => {

files.push({ url: item });

});

this.files = files;

}

} else {

this.images = [];

this.files = [];

}

},

images(newVal) {

this.$emit("valChange", this.images.join(","));

}

},

created() {

this.siteId = sessionStorage.getItem("siteId");

this.userId = sessionStorage.getItem("userId");

},

methods: {

/*

* 移除某张图片

* file 移除的图片

* fileList 剩余的图片列表

*/

handleRemove(file, fileList) {

this.images = [];

fileList.map(item => {

this.images.push(item.url);

});

},

/*

* 图片上传成功

* res 上传图片接口返回的数据

*/

handleSuccess(res) {

if (res.ret != 200) {

this.$message.error(res.msg);

} else {

if (this.maxCount > 1) {

this.images.push(...res.data);

} else {

this.images = res.data;

}

}

},

/*

* 图片上传超出数量

*/

handleExceed() {

this.$message({

message: "最多只能上传" + this.maxCount + "张图片",

type: "warning",

duration: 2000

});

}

}

};

.avatar-uploader .el-upload {

border: 1px dashed #d9d9d9;

border-radius: 6px;

cursor: pointer;

position: relative;

overflow: hidden;

}

.avatar-uploader .el-upload:hover {

border-color: #409eff;

}

.avatar-uploader-icon {

font-size: 28px;

color: #8c939d;

width: 178px;

height: 178px;

line-height: 178px;

text-align: center;

}

.avatar {

width: 178px;

height: 178px;

display: block;

}

父组件

添加文件

效果图

微信截图_20200703085740.png

使用方式同上，只是element组件换了一下

class="upload-demo"

:action="`${this.$store.state.uploadBefore}/api-f/file/moreuploads?siteId=${ siteId }&userId=${ userId }`"

name="files"

:limit="maxCount"

:file-list="fileList"

:on-change="handleChange"

:on-remove="handleRemove"

:on-exceed="handleExceed"

:disabled="disabled"

>

{{ title }}

export default {

name: "UpFile",

props: {

value: {

type: Array,

default: []

},

maxCount: {

// 最大上传文件数量

type: Number,

default: 1

},

disabled: {

// 是否禁用上传组件

type: Boolean,

default: false

},

title: {

// 按钮文本

type: String,

default: '上传附件'

}

},

data() {

return {

siteId: null,

userId: null,

fileList: []

};

},

model: {

prop: "value",

event: "valChange"

},

watch: {

value(newVal) {

this.fileList = newVal;

},

fileList(newVal) {

this.$emit("valChange", this.fileList);

}

},

created() {

this.siteId = sessionStorage.getItem("siteId");

this.userId = sessionStorage.getItem("userId");

},

methods: {

/*

* 移除某张文件

* file 移除的文件

* fileList 剩余的文件列表

*/

handleRemove(file, fileList) {

this.fileList = fileList;

},

/*

* 文件上传

* res 上传文件接口返回的数据

*/

handleChange(file) {

console.log(file);

if (file.status == "success") {

if (file.response.ret != 200) {

this.$message.error(file.response.msg);

} else {

this.fileList.push({

name: file.name,

url: file.response.data[0]

});

}

}

},

/*

* 文件上传超出数量

*/

handleExceed() {

this.$message({

message: "最多只能上传" + this.maxCount + "件文件",

type: "warning",

duration: 2000

});

}

}

};

.avatar-uploader .el-upload {

border: 1px dashed #d9d9d9;

border-radius: 6px;

cursor: pointer;

position: relative;

overflow: hidden;

}

.avatar-uploader .el-upload:hover {

border-color: #409eff;

}

.avatar-uploader-icon {

font-size: 28px;

color: #8c939d;

width: 178px;

height: 178px;

line-height: 178px;

text-align: center;

}

.avatar {

width: 178px;

height: 178px;

display: block;

}