浏览器上传图片到服务端,我用过两种方法:
1。本地图片转换成base64,然后通过普通的帖子请求发送到服务端。
操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法
2。通过形式表单提交。
形式表单提交图片会刷新页面,也可以时形成绑定到一个隐藏的iframe上,可以实现无刷新提交数据。但是如果想传输多条形式表单数据,需要写很多dom,同时还要写iframe,太麻烦。
目前感觉比较干净的办法就是通过axios的帖子请求,发送形式数据到后台。
html部分,至于界面优化,可以把输入文件的不透明度设置为0,点击其父容器,即触发文件
代码如下:
& lt;输入类="文件" name="文件" type="文件"接受=巴枷?png、gif图像/形象/jpeg”@change="更新"/比;
axios的帖子请求,发送形式数据部分,这样就可以无刷新的提交形式数据到后台
更新(e) {
让文件=e.target.files [0];
让参数=new FormData ();//创建形式对象
param.append(“文件”,文件,file.name);//通过追加向形式对象添加数据
param.append('块',' 0 ');//添加形式表单中其他数据
console.log (param.get(“文件”));//FormData私有类对象,访问不到,可以通过得到判断值是否传进的去
让配置={
标题:{“内容类型”:“多部分/格式”}
};//添加请求头
this.axios.post (' http://upload.qiniu.com/',参数配置)
不要犹豫(响应=祝辞{
console.log (response.data);
}）
}
之前
<强>以下部分是扩展
vue开发环境下,上传图片到七牛
最近着手的约能人项目,需要上传图片到七牛,但是感觉只是简单的上传图片还需要引七牛的js,太麻烦了,就自己一切从简。实现逻辑:获取后台返回的七牛牌,然后axios的帖子请求,发送形式数据到七牛。
,七牛的令牌是其平台封装好的,直接在自己服务器配置就能获取到在其官网上可以找到直接能用的代码,,在七牛平台获取到后,返回给前台直接拿就好了
以下是直接上传图片到七牛,不需要安装七牛乱七八糟的js,只需要通过七牛的形式表单上传就行了。
更新(e) {
让文件=e.target.files [0];
让d=新的日期();
让type=file.name.split ('。');
让tokenParem={
' putPolicy ': '{\“\”: \ " $(帧)\”,\“\”:\“$ (fsize) \”, \“w \”: \“$ (imageInfo.width) \”, \“h \”: \“$ (imageInfo.height) \”, \“散列\”,\“$ (etag) \“}”,
“关键”:“orderReview/' + d.getFullYear () + '/' + (d.getMonth () + 1) + '/' + d.getDate () + '/' + d.valueOf() + ' . ' +类型(type.length-1),
“斗”:this.domain,//七牛的地址,这个是你自己配置的(变量)
};
让参数=new FormData ();//创建形式对象
param.append('块',' 0 ');//断点传输
param.append('块',' 1 ');
param.append(“文件”,文件,file.name)
console.log (param.get(“文件”));//FormData私有类对象,访问不到,可以通过得到判断值是否传进的去
让配置={
标题:{“内容类型”:“多部分/格式”}
};//先从自己的服务端拿到令牌
this.axios.post (api.uploadToken qs.stringify (tokenParem))
不要犹豫(响应=祝辞{
这一点。令牌=response.data.uploadToken;
param.append(“令牌”,this.token);
如果(this.images.length> 8) {
alert('不能超过9张”);
返回;
}
this.uploading(参数、配置、file.name);//然后将参数上传七牛
返回;
}）
}，
上传(参数、配置、路径名){
this.axios.post (' http://upload.qiniu.com/',参数配置)
不要犹豫(响应=祝辞{
console.log (response.data);
让localArr=this.images.map ((val、索引arr)=祝辞{
返回arr .localSrc(指数);
}）
如果(! ~ localArr.indexOf(路径)){
this.images.push ({“src”: this.showUrl + response.data.key localSrc:路径名});
其他}{
alert('已上传该图片”);
}
}）
}，
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
