vue3+ant design vue与vue3+vant实现阿里云oss文件上传

1、vue3+ant design vue实现阿里云oss文件上传

效果图

<a-form-item name="fileList" label="应用截图">
   <a-upload
   v-model:file-list="fileList"
   name="文件上传"
   action=""
   :customRequest="upDown"
   :beforeUpload="beforeUpload"
   @remove="removeFile"
   list-type="picture-card"
   accept=".png, .jpg, .jpeg"
   >
      <div>
         <PlusOutlined />
      </div>
   </a-upload>
<!-- <a-upload
     v-model:file-list="fileList"
     name="文件上传"
     action=""
     :customRequest="upDown"
     :beforeUpload="beforeUpload"
     @remove="removeFile"
     accept=".png, .jpg, .jpeg"
    >
       <a-button> 选择文件 </a-button>
     </a-upload> -->
</a-form-item>


import {
  getSign,
  uploadOss,
} from '@/api/nineCadres/index';

const fileList = ref<any[]>([]); //文件上传列表
const formState = ref({
  fileList: [], //文件列表
});


import { message } from 'ant-design-vue';
// 检查文件类型，如果文件类型正确，则继续上传,false指停止上传，true指继续上传，file是文件
const beforeUpload = (file) => {
    const isImage =
      file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
    if (!isImage) {
      message.error('只能上传jpg/png格式的图片！');
      return false; // 阻止上传
    }
    return true; // 允许上传
};

  // 引入 Day.js
  const dayjs = require('dayjs');
  // 获取当前日期和时间
  const currentDate = dayjs();
  const downloadUrl = ref(''); //下载地址
  // 导入文件
const upDown = async (file) => {
    // console.log('文件', file);
    const random = Math.random();
    const fileName = `${random}${file.file.name}`;
    getSign().then(async (res) => {
      const { host, dir, OSSAccessKeyId, success_action_status, Signature, policy } = res;
      const formData = new FormData();
      const address = dir + file.file.name; //文件名
      const url = host; //解构拿到url地址便于后面调uploadOss接口
      formData.append('key', address);
      formData.append('OSSAccessKeyId', OSSAccessKeyId);
      formData.append('Signature', Signature);
      formData.append('policy', policy);
      formData.append('success_action_status', success_action_status);
      formData.append('file', file.file);
      // 上传OSS
      uploadOss({ url, formData })
        .then((res) => {
          // console.log('文件上传成功');
        })
        .catch((err) => {
          // console.log('err', err);
          message.error('上传失败');
        });
      downloadUrl.value = host + '/' + address; //文件下载地址
      let list: any = [];
      list.push({ name: file.file.name, url: downloadUrl });
      fileList.value = list; //文件列表
    });
 };
  // 删除文件
  const removeFile = (file) => {
    const index = fileList.value.indexOf(file.file);
    const newFileList = fileList.value.slice();
    newFileList.splice(index, 1);
    fileList.value = newFileList;
    formState.value.fileList = []; //转存到表单数据中，便于校验
  };

2、vue3+vant实现阿里云oss文件上传

<van-field name="uploader">
  <template #input>
     <div class="uploader_box">
        <div class="uploader_style">请上传应用使用情况截图</div>
         <van-uploader v-model="fileList" :max-count="5" :after-read="afterRead">
             <div class="up_div">
                 <img src="@/assets/image/addImage.png" class="image_up" />
                 <div class="image_text">还可添加{{ imageNumber }}张</div>
              </div>
          </van-uploader>
       </div>
   </template>
</van-field>

const fileList = ref([]) //文件上传列表
const downloadUrl = ref('') //下载地址

//文件上传
const afterRead = file => {
  // 此时可以自行将文件上传至服务器
  console.log('文件', file.file)
  const random = Math.random()
  const fileName = `${random}${file.file.name}`
  getSign().then(async res => {
    const { host, dir, OSSAccessKeyId, success_action_status, Signature, policy } = res.data
    const formData = new FormData()
    const address = dir + file.file.name //文件名
    const url = host //解构拿到url地址便于后面调uploadOss接口
    formData.append('key', address)
    formData.append('OSSAccessKeyId', OSSAccessKeyId)
    formData.append('Signature', Signature)
    formData.append('policy', policy)
    formData.append('success_action_status', success_action_status)
    formData.append('file', file.file)
    console.log('测试', url)
    // 上传OSS
    uploadOss({ url, formData })
      .then(res => {
        console.log('文件上传成功')
      })
      .catch(err => {
        if (err.response) {
          const { status, data } = err.response
          console.error(`Error: ${status}, Message: ${data}`)
        } else {
          console.error('Request failed:', err.message)
        }
        showToast('上传失败')
      })
    downloadUrl.value = host + '/' + address //文件下载地址
    let list = []
    list.push({ name: file.file.name, url: downloadUrl })
    fileList.value = list //文件列表
    console.log('文件列表', fileList.value)
  })
}

watchEffect(() => {
  imageNumber.value = 5 - fileList.value.length
})

原文地址：https://blog.csdn.net/m0_62626838/article/details/143575932

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！