Aliyun object storage OSS front-end direct transmission, (used with uView component)

scenes to be used:

1. uniapp-vue2 syntax
2. uview
3. Alibaba cloud object storage oss

Steps for usage:

1. First introduce uView into the project we created
2. Then test whether the import is successful
3. Open uView's official website introduction | uView 2.0 - fully compatible with nvue's uni-app ecological framework - uni-app UI framework , find and upload and then upload

   <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}`].length
   				lists.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>

   copied into the project,

4. According to uniapp official website uni.uploadFile(OBJECT) | uni-app official website uni.uploadFile is the api of uniapp and the parameter formData can request additional form data

5. So what additional parameters should we pass?

6. You can view the related documents of Alibaba Cloud Object Storage . Call the PostObject form to upload Object_Object Storage-Alibaba Cloud Help Center to see which ones are mandatory and which ones are not.

7. Then pass the parameters to

   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文件路径+文件名
   		},

8. uploaded successfully