<template>
  <view>
	<ali-oss-uploader
	  :max-count="1"
	  :max-size="100"
	  :type="artisanType+1"
	  :user-id="userId"
	  :kind="2"
	  :file-string="video"
	  accept="video/*"
	  button-text="上传视频"
	  @success="onUploadSuccess"
	  @error="onUploadError"
	  @delete="onFileDelete"
	>
	</ali-oss-uploader>
  </view>
</template>

<script>
import request from '../../utils/request'
import AliOssUploader from '../../components/ali-oss-uploader/ali-oss-uploader.vue'
export default {
  components: {
	AliOssUploader
  },
  data() {
    return {
      fileList: [],
	  video: '',
	  userId: 34,
	  artisanType: 1
    }
  },
  methods: {
	async chooseImage() {
	  // all
	  try {
	    const files = await uni.chooseFile({
	      count: 1,
	      type: 'image'
	    })
		console.log(files)
	    let file = files.tempFiles[0];
		let filename = files.tempFiles[0].name;
		request.post('/user/getalioss',{type: 1,kind: 1})
		  .then(data => {
			const formData = new FormData();
			formData.append('name',filename);
			formData.append('policy', data.policy);
			formData.append('OSSAccessKeyId', data.ossAccessKeyId);
			formData.append('success_action_status', '200');
			formData.append('signature', data.signature);
			formData.append('key', data.dir + filename);
			// file必须为最后一个表单域，除file以外的其他表单域无顺序要求。
			formData.append('file', file);
			fetch(data.host, { method: 'POST', body: formData},).then((res) => {
			  console.log(res);
			  alert('文件已上传');
			});
		  })
		  .catch(error => {
			console.log('Error occurred while getting OSS upload parameters:', error);
		  });
	  } catch (e) {
	    console.error('选择文件出错:', e)
	  }
	},
    onUploadSuccess({ file, fileList }) {
      console.log('上传成功:', file)
    },
    onUploadError({ error, file }) {
      console.error('上传失败:', error)
    },
    onFileDelete({ error, file }) {
      console.error('上传失败:', error)
    }
  }
}
</script>
<style>

.image-preview,
.upload-btn {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.preview-video,
.preview-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin-right: 18rpx;
}

.upload-btn {
  border: 2rpx dashed #DDDDDD;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plus-icon {
  font-size: 60rpx;
  color: #999999;
}

</style>