一个基于vue的移动端图片上传插件
- 多选/拍照
- 图片预览/删除
npm install vue-pictring
- 引入
import pictring form 'vue-pictring'
Vue.use(pictring, {
type: 'base', // 上传文件的类型,如果选择'img'插件会将图片以blob储存到FormData里。 默认为'base'(图片数据为base64格式)
max: 9, // 允许上传图片的最大张数。 默认为9
size: 80, // 容器尺寸,可选'px'固定数值,若填入数字则为屏幕百分比
compress: 0.8, // 图片压缩质量, 0~1 , 默认为0.8
})
- 声明组件
<div id='app'>
<!--组件使用时需要添加$refs标记用来调用组件内的方法-->
<vue-pictring ref='$demo'></vue-pictring>
</div>
- 图片上传
由于上传图片方式的多样性,插件中上传方法只是将图片数据返回成数组或是FormData对象,再由用户自定义上传。
let files = this.$refs.$demo.up() // 根据用户使用插件时所选的type来返回FormData或是base64数组
$.ajax({
type : "POST",
url : "test.aspx",
data : files,
success : function(data) {
alert('上传成功!')
},
error : function(){
alert("错误")
}
});
- 清空图片
this.$refs.$demo.empty() // 清空图片