vue图片上传组件
‘壹’ Vue 上传图片到七牛云实用攻略
vue 一般采用element 的upload 上传图片/文件。
首先，设定参数
参考Element upload 文档
其次，如图所示，重点在于domain和qiniuaddr两个参数！ 参考 七牛云存储图片域名文档
然后 上传一定要先获取到七牛云token！我是采用axios post获取。
接着，把返回的 file.name赋值给 key
this.QiNiuYun.key = `name_${file.name}`;
如图 上传成功/错误处理 函数
大功告成！
补充：
1. this.uploadImageUrl 这个变量实际上是 图片真正的URL-----https地址！！！
2. 该方法是针对单图上传，如果想多图 将data 内的参数 limit：1 修改为需要的图片数量 ！！！
3. 注意！当后台需要你传递多张图片的url时，可采用 此方法！！！
//拼接 url
if(this.uploadImageList===''){
this.uploadImageList= this.uploadImageUrl;
}else{
this.uploadImageList=this.uploadImageList+';'+ this.uploadImageUrl;
}
‘贰’ 快速创建VUE移动端上传图片功能
主要功能：限制图片张数、图片大小压缩、同时上传多张、上传后可编辑删除、上传中和上传失败状态显示。
使用配置：使用vantUI、axios请求经过封装、安装image-compressor.js图片压缩
npm install image-compressor.js //注意是image-compressor.js不是image-compressor
ps：从父级页面传入相应的值到props里面
‘叁’ vue-upload-component 上传文件及图片
演示： https://lian-yue.github.io/vue-upload-component/#/zh-cn/examples
地址： https://lian-yue.github.io/vue-upload-component/#/zh-cn/documents
‘肆’ VUE上传图片跨域
上传组件用的elementui - upload,由于上传图片需要用户的登陆信息,所以前端请求头添加了一个token ,属于自定义header
跨域时浏览器发送options预检请求,会带上自定义的请求头字段,用来判断该字段是否被服务端支持.
‘伍’ vue点击上传图片，vue上传oss，vue-cropper图片裁剪功能
很多刚入门的小伙伴上传图片都会使用现成的框架，然后根据框架提供的api进行上传，感觉这样是最简单的，其实上传图片是一个很简单的功能，
1.将input的设为透明然后定位到按钮上面，通过点击实现上传
2.点击按钮，通过处发input的点击事件后处发change，达到唤起上传图片的效果
先通过npm安装oss依赖
oss官方文档
1.前端拿到 accessKeyId，accessKeySecret直接上传oss
这种用法会直接暴露id及secret，相当于把自己家门的钥匙告诉别人，不推荐使用
2.通过后台转换，拿到对应的参数，进行上传
图片裁剪的插件，先通过npm安装依赖
vue-cropper 高版本解决在ios上图片拍照旋转问题
父组件
子组件，在项目components文件中新建一个cropper文件，在父组件中引入
‘陆’ vue2.x，element-ui 中上传图片组件（图片查看，已有图片渲染）
1、基本标签结构
<el-upload name="picture"
:action="'/api/image/upload?imageType=xxx"
accept=".jpg, .png"
list-type="picture-card"
:limit="1"
:file-list="filelists"
:on-exceed="onExceed"
:before-upload="beforeUpload"
:on-preview="handlePictureCardPreview"
:on-success="imagesuccess"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<!--预览-->
<el-dialog :visible.sync="imgPreviewVisible" size="full" :modal="false" title="预览">
<img width="100%" :src="imagePreviewUrl" alt="">
</el-dialog>
方法示例：
onExceed(files, fileList) {
this.$message({
type: 'info',
message: '最多只能上传一个图片',
ration: 6000
});
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isGIF = file.type === 'image/gif'
const isPNG = file.type === 'image/png'
const isBMP = file.type === 'image/bmp'
const imgSizeLimit= file.size < 1*1024*1024;
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
}
if (!imgSizeLimit) {
this.$message.error('上传图片大小不能超过 1MB!');
}
return (isJPG || isBMP || isGIF || isPNG) && imgSizeLimit; },
handlePictureCardPreview:function(file){
//todo
},
imagesuccess:function(response, file, fileList){
//todo
this.filelists = [];
this.filelists = [file]
},
handleRemove:function(file, fileList){
//todo
},
2、action为后台上传图片接口
file-list为文件列表
limit为设置的可上传文件的最大个数
onExceed上传的文件个数超出设定时触发的函数，参数为上传的文件file和文件列表 filelists
beforeUpload文件上传前执行，参数为上传的文件file，如果返回false或者返回Primary且被reject，则停止上传
handlePictureCardPreview图片预览时触发，参数为上传的文件file，
imagesuccess图片上传成功时触发参数response, file, filelists
handleRemove移除图片时触发，参数为file, filelists
3、已有图片渲染问题：
自己在实际开发过程中，会遇到编辑情况，并且已经存在一张图片，想要放到图片组件中，可以调用组件里声明的方法。
由于是新手，组件使用不熟练，所以我将图片的显示与上传等操作分离，单独自己去展示，上传时再使用组件上传，使用组件的:show-file-list="false"属性来隐藏组件自带的图片展示功能。
后来发现自己可以自己初始化filelists列表，来使已存在的图片文件放入组件中，放入的对象当然时文件，但是我后台只有图片地址，如何拼出一个file格式对象来呢？通过debug，我发现上传的文件格式对象有好多属性，当然，存在url这个属性就可以通过组件进行展示。最简单的一种方式就是直接创建一个只有一个url属性的对象var file = { url:this.showDetailForm.profilePhotoPath } this.filelists.push(file) 然后push到文件列表，就可以在组件中进行渲染，对图片的操作可以使用声明的方法+表单属性来实现业务的全过程（当然，这样渲染的文件只有url，没有其他属性，比如文件大小，涉及到其他属性的函数都没办法调用）
‘柒’ vue mintui组件：多图片上传
浏览器地址栏输入
data:image/jpeg;base64,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
‘捌’ vue + elementui upload上传图片到服务器以及保存后回显问题
前言：
关于vue和elementui安装导入使用不做介绍
1.template中首先展示upload多张图片上传
2.当upload组件发生改变时处罚addFile
3.图片提交到服务器，拿到服务器的数据地址
3.显示图片 将拿到的数据放进一个数组中显示到file-list中去就好了
至此，完结。
有不对的地方欢迎指导哦。
‘玖’ vue页面传值能传图片吗
可以
1.云储存
常见的 七牛云，OSS（阿里云）等，这些云平台提供API接口，调用相应的接口，文件上传后会返回图片存储在服务器上的路径，前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。
主要步骤
向后端发送请求，获取OSS配置数据
文件上传，调用OSS提供接口
文件上传完成，后的文件存储在服务器上的路径
将返回的路径存值到表单对象中
代码范例
我们以阿里的 OSS 服务来实现，们试着来封装一个OSS的图片上传组件。
通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传，仅仅使用他组件的样式，和其他上传前的相关钩子（控制图片大小，上传数量限制等）。
‘拾’ vue上传图片设置headers表头信息
<el-form-item label="icon图标" prop="icon">
<span><img :src="ruleForm.icon_url" min-width="70" height="70" />
class="avatar-uploader"
action
name="file1"
:data="{index:1}"//传递参数
:show-file-list="false"
:http-request="uploadFileUrl" > <div class="upload-btn">上传
</el-form-item>
//上传图片
uploadFileUrl(file){
var fileIndex=file.data.index;
//console.log("=========",file.data.index);
let formData =new FormData()
formData.append("file", file.file)
/**上传图片接口*/
const instance =Axios.create({
baseURL:"http://216.118.XXX.50:8082",//服务器地址
timeout:10000,
headers:{'Content-Type':'multipart/form-data',"auth":sessionStorage.getItem("token"),"uid":sessionStorage.getItem("uid_ciphertext")},
method:'POST',
data:formData
})
instance({url:"/api/v1/admins/games/images/upload"}).then((data) => {
// console.log(JSON.stringify(data))
this.ruleForm.icon_url=data.data.data.icon_url;
})
},