阿里云oss如何上传限制只能上传图片并实现多图上传?

发布于 2022-09-06 03:32:31 字数 2605 浏览 31 评论 0

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

初见你 2022-09-13 03:32:31

oss可以设置Content-Type(MIME)决定上传的格式 多图同时上传可以利用循环去做

等待我真够勒 2022-09-13 03:32:31

该方法本身就是支持多图上传的,只要在input type="file"中加multiplie属性即可

殤城〤 2022-09-13 03:32:31

<input accept="image/jpeg,image/jpg,image/png" multiple="multiple"/> accept="image/jpeg,image/jpg,image/png" 限制上传图片类型为png/jepg

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文