vue 使用原生canvas_vue 使用原生组件上传图片的实例

需求描述：需要将后台返回的图片路径赋值到img的 src

1 一个页面上传一张图片

当一个页面只有一个位置需要上传图片，很简单，直接绑定上传按钮

html页面

js代码：封装上传图片的方法

uploadPic(e) {

var _self = this;

var inputFile = e.target;

if (!inputFile.files || inputFile.files.length <= 0) {

return;

}

var file = inputFile.files[0];

var formData = new FormData();

formData.append('file', file);

formData.append('SaveDir', 'Map/MapItem');

formData.append("FileName", $.whiskey.tools.dateFormat(new Date(), "HHmmssffff"));

$.ajax({

url: "/Upload/UploadPic",//后台上传图片的方法

type: 'POST',

dateType: 'json',

cache: false,

data: formData,

processData: false,

contentType: false,

success: function (res) {

if (res.ResultType == 3) {

var filePath = res.Data.file;//后台返回的图片路径

_self.mapItem.MapIcon = filePath;//将路径赋值到声明的变量中

}

}

});

},

2 一个页面上传多张图片

当一个页面有多个位置需要上传图片，如果按照上面方法，得需要绑定多个上传函数，所以我把重复的部分封装出来,用到了promise函数

html页面

js代码：封装上传图片的方法

uploadPic(e) {

var _self = this;

var inputfile = e.target;

_self.uploadImg(inputfile).then(data => {

_self.mapItem.MapIcon = data;//data为取到的图片路径

})

},

//封装函数

uploadImg(inputFile) {

var _self = this;

if (!inputFile.files || inputFile.files.length <= 0) {

return;

}

return new Promise((suc,err)=>{

var file = inputFile.files[0];

var filepath = "";

var formData = new FormData();

formData.append('file', file);

formData.append('SaveDir', 'Map/MapSite');

formData.append("FileName", $.whiskey.tools.dateFormat(new Date(), "HHmmssffff"));

$.ajax({

url: "/Upload/UploadPic",

type: 'POST',

dateType: 'json',

cache: false,

data: formData,

processData: false,

async:false,

contentType: false,

success: function (res) {

if (res.ResultType == 3) {

filepath = res.Data.file;

suc(filepath);

}

}

});

})

},

},

补充知识：vue 利用原生input上传图片并预览并删除

看代码~

js部分

export default {

name: 'ComUpLoad',

data() {

return {

imgData: '',

imgArr: [],

imgSrc: '',

allowAddImg: true

}

},

methods: {

changeImg: function(e) {

var _this = this

var imgLimit = 1024

var files = e.target.files

var image = new Image()

if (files.length > 0) {

var dd = 0

var timer = setInterval(function() {

if (files.item(dd).type !== 'image/png' && files.item(dd).type !== 'image/jpeg' && files.item(dd).type !== 'image/gif') {

return false

}

if (files.item(dd).size > imgLimit * 102400) {

// to do sth

} else {

image.src = window.URL.createObjectURL(files.item(dd))

image.onload = function() {

// 默认按比例压缩

var w = image.width

var h = image.height

var scale = w / h

w = 200

h = w / scale

// 默认图片质量为0.7，quality值越小，所绘制出的图像越模糊

var quality = 0.7

// 生成canvas

var canvas = document.createElement('canvas')

var ctx = canvas.getContext('2d')

// 创建属性节点

var anw = document.createAttribute('width')

anw.nodeValue = w

var anh = document.createAttribute('height')

anh.nodeValue = h

canvas.setAttributeNode(anw)

canvas.setAttributeNode(anh)

ctx.drawImage(image, 0, 0, w, h)

var ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase()// 图片格式

var base64 = canvas.toDataURL('image/' + ext, quality)

// 回调函数返回base64的值

if (_this.imgArr.length <= 4) {

_this.imgArr.unshift('')

_this.imgArr.splice(0, 1, base64)// 替换数组数据的方法，此处不能使用：this.imgArr[index] = url;

if (_this.imgArr.length >= 5) {

_this.allowAddImg = false

}

}

}

}

if (dd < files.length - 1) {

dd++

} else {

clearInterval(timer)

}

}, 1000)

}

},

deleteImg: function(index) {

this.imgArr.splice(index, 1)

if (this.imgArr.length < 5) {

this.allowAddImg = true

}

}

}

}

以上这篇vue 使用原生组件上传图片的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持随便开发网。