阿里云： web如何直传oss & 常见问题

如何使用input.Type=‘file‘拿到文件对象

1、在页面中添加

<input type="file" style="display: none" ref="input" @input="upload" >

在需要上传文件的地方增加

<button @click="$refs.input.click()">
        上传文件
    </button>

在method中增加

upload(){
        let blob= this.$refs.input.files[0]
        console.log(blob)//文件对象到手
    }

如何改成formData

const data = new FormData();
      data.append("file", files);
         console.log(data )//后台文件交互使用格式

阿里云： web如何直传oss

一、web如何直传oss（阿里云官网对应产品服务是：对象存储 OSS）

阿里云官网文档：

1. 对象存储OSS：存储空间（Bucket）

注意事项：

1. 每新建一个bucket, 其对应的endpoint域名可能变化，需查看OSS后台（一个bucket对应一个endpoint）。

2. 若访问oss图片（即oss图片链接），报CORS问题，需要在OSS后台，配置可访问域名的白名单。

3. bucket 类似存储桶目录，可在bucket下新建子目录（用于存放图片资源等），然后前端上传到子目录下（storeAs字段）

3. bucket命名规范：只能包括小写字母，数字和短横线（-），必须以小写字母或者数字开头，命名长度限制在3到63字节之间。

1）先下载 ali-oss库：npm i ali-oss

（2）在.vue页面中使用：

import OSS from 'ali-oss';

let blobO = this.$refs.inputList.files[0]
const ext = blobO.name.split('.').pop() || '';
        const rename = blobO.name.split(ext)[0] + new Date().getTime() + '.' + ext; // 图片名称+时间戳避免重复
        let storeAs = 'storage/uploads/img/' + str + '/' + rename; // OSS图片文件存放位置（即在OSS上的目录名 是目录名）


var client = new OSS.Wrapper({
region: 'oss-cn-hangzhou',
accessKeyId: that.ossConfig.AccessKeyId,
accessKeySecret: that.ossConfig.AccessKeySecret,
stsToken: that.ossConfig.SecurityToken,
bucket: 'yp-images',  secure: true});

client.put(storeAs, buffer).then(function (result) {  console.log(result);
}).catch(function (err) {
  console.log(err);
});