image.png
    之前写图片上传都是通过自定义方法将file和OSS信息组装到formData里面然后设置请求头’Content-Type’: ‘multipart/form-data’来上传的，现在直接用自带的action上传还是挺方便的。

    1. <template>
    2.     <a-upload
    3.     :action="urlhost"
    4.     listType="picture-card"
    5.     accept="image/*"
    6.     @preview="handlePreview"
    7.     @change="handleChange"
    8.     :remove="removeImg"
    9.     :beforeUpload="beforeUpload"
    10.     :data="paramsData">
    11.     <a-icon type="plus" />
    12.       <div class="ant-upload-text">点击上传</div>
    13.  </a-upload>
    14.    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
    15.       <img alt="example" style="width: 100%" :src="previewImage" />
    16.    </a-modal>
    17. </template>
    20. <script>
    21.   function getBase64(file) {
    22.     return new Promise((resolve, reject) => {
    23.       const reader = new FileReader();
    24.       reader.readAsDataURL(file);
    25.       reader.onload = () => resolve(reader.result);
    26.       reader.onerror = error => reject(error);
    27.     });
    28.   }
    29.   import {getOssSignWeb} from '../../../api/upload.js'; //获取后端OSS信息接口
    30.   export default {
    31.       return {
    32.         businessId:'',//业务id
    33.         previewVisible:false,
    34.       previewImage: '',
    35.         paramsData:{ //OSS信息对象 也是用来需要上传的参数
    36.           'OSSAccessKeyId':'',
    37.           'policy':'',
    38.           'Signature':'',
    39.           'key':'',
    40.           'success_action_status':200
    41.         },
    42.         urlhost:'', //上传路径
    43.       },
    44.     methods: {
    45.         async handlePreview(file) { //点击图片预览
    46.         if (!file.url && !file.preview) {
    47.           file.preview = await getBase64(file.originFileObj);
    48.         }
    49.         this.previewImage = file.url || file.preview;
    50.         this.previewVisible = true;
    51.       },
    52.       beforeUpload(file, fileList){ //在上传前获取OSS信息
    53.         return new Promise((resolve,reject)=>{
    54.           let params ={
    55.             "businessId":this.businessId,
    56.             "suffix":'.jpg'
    57.           }
    58.           getOssSignWeb(params).then(res=>{
    59.                 this.urlhost = res.retData.host
    60.               this.paramsData = { //组装参数
    61.                 'OSSAccessKeyId':res.retData.accessid,
    62.                 'policy':res.retData.policy,
    63.                 'Signature':res.retData.signature,
    64.                 'key':res.retData.dir+res.retData.fileName,
    65.                 'success_action_status':200
    66.               }
    67.               resolve(file)
    68.             }).catch(e=>{
    69.               reject()
    70.             })
    71.         })
    72.       },
    73.       removeImg(){
    74.         return new Promise((resolve,reject)=>{
    75.           this.$confirm({
    76.             title: '提示',
    77.             content: '是否删除这张图片',
    78.             okText: '确定',
    79.             okType: 'danger',
    80.             cancelText: '取消',
    81.             onOk() {
    82.               resolve(true)
    83.             },
    84.             onCancel() {
    85.               resolve(false)
    86.             },
    87.           })
    88.         })
    89.       },
    90.       handleChange(info) {
    91.         if (info.file.status === 'done') {
    92.           this.$message.success('上传成功！');
    93.         }
    94.         if (info.file.status === 'error') {
    95.           this.$message.error('上传失败！');
    96.         }
    97.       },
    98.       handleCancel() {
    99.         this.previewVisible = false;
    100.       },
    101.     }
    102.   }
    103. </script>