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

阿里云： 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)//文件对象到手
    }

另外一种获取 file 方式

<input type="file" class="picUpload_btn" :name="item.field" @change="uploadHandle">

uploadHandle(event) {
      var key = event.target.name
      let blobO = event.target.files[0]
}

如何让file 上传多张

<input type="file" class="picUpload_btn" ref="inputList" @change="uploadList" multiple>

 

如何改成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);
});

storeAs：存储的路径和名字。

Region：地区选择，默认这个。

accessKeyId、accessKeySecret、stsToken：临时凭证，后台获取。

Bucket：上传的位置。

Secure：（很重要）允许HTTPS，因为这个原因花了好长时间。

client.put：方法

 

实际中：一直报错 put -1 ，这是因为：跨域的原因

OSS跨域设置如下图所示：

2、点击bucket，找到使用的oss名称，点击进去，找到【数据安全】【跨域设置】，点击【创建规则】

 

3、按下图填写跨域内容，最后保存即可 

 保存后，稍等一会，生效需要一定时间