vue图片上传插件
❶ 快速创建VUE移动端上传图片功能
主要功能：限制图片张数、图片大小压缩、同时上传多张、上传后可编辑删除、上传中和上传失败状态显示。
使用配置：使用vantUI、axios请求经过封装、安装image-compressor.js图片压缩
npm install image-compressor.js //注意是image-compressor.js不是image-compressor
ps：从父级页面传入相应的值到props里面
❷ 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,由于上传图片需要用户的登陆信息,所以前端请求头添加了一个token ,属于自定义header
跨域时浏览器发送options预检请求,会带上自定义的请求头字段,用来判断该字段是否被服务端支持.
❻ vue文件上传插件有哪些
vue-upload-component - Vuejs文件上传组件
vue-core-image-upload - 轻量级的vue上传插件
vue-dropzone - 用于文件上传的Vue组件
❼ 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移动端图片上传，可最多上传9张,使用webuploader插件
图片上传WebUploader.js