weui uploader的用法
执行顺序 先把uploader的html和js写了 在把js中的url改成后台存储照片的地址,(必须要注意fileVal的值)
在一个事件中调用uploader的click(这个事件根据需求加在所需位置)。在另一个函数中编写请求服务器的代码,在uploader js 的onSuccess事件中调用请求服务器的函数。
1.这上传一张图片的时候(只复制这个就行)
js 必须要再mounted函数中
mounted () {
const self = this
weui.uploader('#uploadera', {
url: 'http://192.168.1.113:3000/cgi/post/uploadimg',
auto: true,
type: 'file',
// 注意 fileVal
fileVal: 'image',
compress: {
width: 1600,
height: 1600,
quality: 0.8
},
onBeforeQueued: function (files) {
// `this` 是轮询到的文件, `files` 是所有文件
if (['image/jpg', 'image/jpeg', 'image/png', 'image/gif'].indexOf(this.type) < 0) {
weui.alert('请上传图片')
return false // 阻止文件添加
}
if (this.size > 10 * 1024 * 1024) {
weui.alert('请上传不超过10M的图片')
return false
}
},
onBeforeSend: function (data, headers) {
const token = document.cookie.split('=')[1]
headers['wec-access-token'] = token
},
onSuccess: function (ret) {
//调用请求服务器的函数
self.avatar(this)
// console.log(this)
}
})
}
- 使用weui另一个组件actionSheet来调用uploader的click事件
这个是调用后台服务器的代码
async avatar (ret) {
const res = await service.post('users/update', {
userId: this.$store.state.currentUser._id,
avatar: ret.url
})
const { code } = res.data
if (code === 0) {
const obj = {
...this.$store.state.currentUser,
avatar: ret.url
}
this.$store.dispatch('setUser', obj)
}
}
流程:
效果图
self.$refs.uploader.click()调用上面uploader的方法