阿里云对象存储OSS前端直传，（配合uView组件使用）

使用场景：

uniapp-vue2语法
uview
阿里云对象存储oss

使用步骤：

首先将uView引入我们创建的项目
然后测试是否引入成功

打开uView的官网介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架，找到上传然后将

<template><u-upload:fileList="fileList1"@afterRead="afterRead"@delete="deletePic"name="1"multiple:maxCount="10"></u-upload>
</template><script>export default {data() {return {fileList1: [],}},methods:{// 删除图片deletePic(event) {this[`fileList${event.name}`].splice(event.index, 1)},// 新增图片async afterRead(event) {// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this[`fileList${event.name}`].lengthlists.map((item) => {this[`fileList${event.name}`].push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)let item = this[`fileList${event.name}`][fileListLen]this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result}))fileListLen++}},uploadFilePromise(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址filePath: url,name: 'file',formData: {user: 'test'},success: (res) => {setTimeout(() => {resolve(res.data.data)}, 1000)}});})},}}
</script>

复制到项目中，

根据uniapp官网uni.uploadFile(OBJECT) | uni-app官网uni.uploadFile为uniapp的api而formData该参数可以请求额外的form data
那么我们应该传哪些额外的参数呢？
可以查看阿里云对象存储的相关文档调用PostObject表单上传Object_对象存储-阿里云帮助中心看看哪些是必传的，哪些是非必传的

然后将参数传过去就可以了

let a = uni.uploadFile({url: " ", // 仅为示例，非真实的接口地址filePath: url,name: 'file',formData: {OSSAccessKeyId: " ", //Bucket拥有者的AccessKey ID默认值：无policy: " ", //当Bucket为非public-read-write或者提供了OSSAccessKeyId（或Signature）表单域时，必须提供Policy表单域。Signature: " ", //AccessKey Secret和Policy计算的签名信息host: " ", //直传oss的服务器地址dir: this.usercodes + "/prop/pic/", //上传oss文件路径+文件名success_action_status: 200, //该表单域指定了上传成功后返回给客户端的状态码。该表单域指定了上传成功后返回给客户端的状态码。key: this.usercodes + "/prop/pic/" + nameurl, //上传Object的名称   上传oss文件路径+文件名},

上传成功

阿里云对象存储OSS前端直传，（配合uView组件使用）相关推荐

阿里云对象存储OSS存储照片
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 概述 OSS可用于图片.音视频.日志等海量文件的存储.各种终端设备.Web网站程序.移动应用可 ...
阿里云对象存储OSS（Object Storage Service）
文章目录简介 endpoint:阿里云服务部署的地区位置见解开发步骤配置文件 utils层(读取全局配置文件并赋值给类变量) service层 impl(基于oss驱动sdk实现类) cont ...
如何结合PICgo，Typora以及阿里云对象存储OSS搭建自己图床写博客
如何利用阿里云对象存储OSS搭建自己图床写博客 1.购买阿里云购买链接登录阿里云–>控制台–>对象存储OSS–购买购买的时候可以选择按月付费一月一元的,也可以年费9元的,40GB作为 ...
阿里云对象存储OSS支持版本管理特性
2019独角兽企业重金招聘Python工程师标准>>> 阿里云对象存储OSS现已经全面支持"对象版本管理"特性.该功能适用于所有的存储类型以及区域.当Bucket ...
阿里云对象存储OSS与文件存储NAS的区别
一.简介应用场景:选择一款存储产品,面向文档数据的存取,不会涉及到数据处理. 产品选型主要从OSS和NAS中选择一款,满足文档存储的需求. 二.NAS优缺点 NAS 是一种采用直接与网络介质相连的特 ...
开启阿里云对象存储OSS防误删新功能，保护您珍贵的数据。
一.背景阿里云对象存储 OSS 是保存海量数据的平台,支持丰富的应用.在使用过程中难免会遇到误操作.程序 Bug.覆盖写等导致数据被删除的场景,对于数据的丢失会非常着急,后果也非常严重,甚至某些情况 ...
关于阿里云对象存储OSS流量包说明
阿里云对象存储OSS公网出方向流量是收费的,内网产生的流量或者公网入方向流量都是免费的,OSS流量计费方式分为按量付费和包年包月流量包两种计费模式,云吞铺子来详细说下阿里云对象存储OSS流量收费标准价 ...
坑！阿里云对象存储OSS收费细则不只是存储还有其他扣费项
阿里云对象存储OSS怎么收费?以为只收取存储费用,不只是存储费还有流量.跨区域复制.流量费.请求费.数据处理费用.对象标签费用.传输加速费用等,快看看别让钱花得不清不楚,云吞铺子来详细说下阿里云对象存 ...
小白篇：阿里云对象存储 OSS
阿里云对象存储 OSS 为了解决海量数据存储与弹性扩容,项目中我们采用云存储的解决方案- 阿里云OSS. 1.打开阿里云官方网站:https://www.aliyun.com/ 2.注册阿里云账 ...

阿里云对象存储OSS前端直传，（配合uView组件使用）

使用场景：

使用步骤：

阿里云对象存储OSS前端直传，（配合uView组件使用）相关推荐

最新文章

热门文章