vue el-element-ui upload图片上传

时间：2020-01-19 20:14:48 阅读：122 评论：0 收藏：0 [点我收藏+]

项目中使用图片上传功能,要实现可以原地上传和修改,一直查找许多资料,结合资料和组件完成此功能,希望对后边的人有帮助

源码:

style部分

<el-upload

action="#"

list-type="picture-card"

:limit="6"

:file-list="fileList"

:on-preview="handlePictureCardPreview"

:on-remove="handleRemove"

:before-upload="beforeImageUpload"

:http-request="uploadImage"

:auto-upload="true"

</el-upload>

<el-dialog :visible.sync="dialogVisible">

</el-dialog>

javaScript部分

export default {

data(){

return {

dialogImageUrl: ‘‘ ",

dialogVisible: false,

fileList: [],

}

methods{

//图片上传之前

beforeImageUpload(file) {

console.log(file)

var testmsg=file.name.substring(file.name.lastIndexOf(‘.‘)+1)

const isJpg = testmsg === ‘jpg‘ || testmsg === ‘png‘

if (!isJpg) {

this.$message.error(‘上传图片只能是 jpg 或 png 格式!‘)

return false

}

const isLt2M = file.size / 1024 / 1024 < 2

if (!isLt2M) {

this.$message.error(‘上传图片大小不能超过 2MB!‘)

return false

}

// return false // (返回false不会自动上传)

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url

this.dialogVisible = true

handleRemove(file, fileList) {

for(var i = 0; i < this.fileList.length; i++){

if(this.fileList[i].url === file.url){

deleteImageReport(this.fileList[i].id).then(res =>{

this.$message.success(‘删除图片成功‘)

})

this.fileList.splice(i, 1)

}

//上传图片

uploadImage(image){

console.log(image.file)

let report = this.currentUser.id

let params = new FormData()

params.append(‘image‘, image.file)

params.append(‘report‘, report)

uploadImageFiles(params).then(res => {

console.log(res)

let url = { url: res.data.image, id:res.data.id }

this.fileList.push(url)

this.$message.success(‘上传成功‘)

}).catch(() =>{

this.$message(‘上传失败,请重新上传‘)

})

}

vue el-element-ui upload图片上传

原文：https://www.cnblogs.com/guoshuai2019/p/12215326.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)