阿里云oss如何上传限制只能上传图片并实现多图上传?
doUpload(){
let userId = localStorage.getItem('userId');
let token = localStorage.getItem('token');
const _this = this;
axios({
url: "http://xxx.xxx.xxx.xxx/internal/oss/get_token",
method: 'GET',
headers: {'w-auth-token': token}
}).then((res) => {
var client = new OSS.Wrapper({
accessKeyId: res.data.accessKeyId,
accessKeySecret: res.data.accessKeySecret,
stsToken: res.data.securityToken,
region: _this.region,
bucket: _this.bucket
});
const files = document.getElementById(_this.name);
if (files.files) {
const fileLen = document.getElementById(_this.name).files;
for (let i = 0; i < fileLen.length; i++) {
const file = fileLen[i];
var date = new Date();
let path="merchant/"+userId+"/"+date.getFullYear()+(date.getMonth()+1)+date.getDate()+date.getHours()+date.getMinutes()+date.getSeconds()+date.getMilliseconds()+ '.' + file.name.split('.').pop();
client.multipartUpload(path, file,{
progress: function* (percentage, cpt) {
// 上传进度
_this.uploadImg.percentage = percentage*100+'%';
console.log(_this.uploadImg.percentage);
}
}).then((results) => {
_this.uploadImg.url=results.url;
_this.uploadImg.name=results.name;
_this.uploadImg.status=true;
_this.show=true;
console.log(results.url);
console.log(results.name);
}).catch((err) => {
this.$Message.error('上传图片失败,请重试!');
});
}
}else{
this.uploadImg.status=true;
this.uploadImg.url=this.src;
}
});
},
目前是参考网上大神写的代码,用的分片上传,想问下各位大神如何限制只能上传图片,就是选择文件的时候只显示图片格式的,以及如何多图同时上传,并且有地方可以设置上传的图片大小
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
oss可以设置Content-Type(MIME)决定上传的格式 多图同时上传可以利用循环去做
该方法本身就是支持多图上传的,只要在input type="file"中加multiplie属性即可
<input accept="image/jpeg,image/jpg,image/png" multiple="multiple"/> accept="image/jpeg,image/jpg,image/png" 限制上传图片类型为png/jepg