wangeditor上传oss

﹏ヽ暗。殇╰゛Y 2022-10-14 12:57 208阅读 0赞

## wangeditor上传oss ##

首先封装oss.js

import {getOss} from '@/api/common' //获取oss上传参数接口
    import axios from 'axios'
    import moment from 'moment' //使用cnpm install moment --save
    
    // 文件扩展名提取
    export function fileType (fileName) {
      return fileName.substring(fileName.lastIndexOf('.') + 1)
    }
    
    /**
     * oss路径定义
     * @param file
     */
    export function ossPath (file) {
      const folder = moment().format('YYYY-MM-DD')
      if (file.name) {
        return `admin/${folder}/${fileType(file.name)}/${file.name}`
      } else {
        return `admin/${folder}/html/${moment().format('YYYY-MM-DD-HH-mm-ss')}.html`
      }
    }
    
    export function ossUpload (file) {
      return new Promise((resolve, reject) => {
        getOss().then((res) => {
          const { accessid, policy, signature } = res
          const formData = new FormData()
          const fileNames = `${Date.parse(new Date())}`;
          let key =
            "video/" +
            fileNames +
            file.name.substring(file.name.lastIndexOf(".")); //文件名，和后台约定
          formData.append('key', key)
          formData.append('OSSAccessKeyId', accessid)
          formData.append('policy', policy)
          formData.append('signature', signature)
          formData.append('success_action_status', '200')
          formData.append('file', file)
          const OSS_URL=res.host
          axios.post(OSS_URL, formData).then((res) => {
            const { status } = res
            if (status === 200) {
              const data = {
                url: `${OSS_URL}/${key}`,
                type: file.name ? fileType(file.name) : 'html'
              }
              resolve(data)
            } else {
              reject(res)
            }
          }).catch(err => {
            reject(err)
          })
        }).catch(err => {})
      })
    }

使用

//在插件处引入  
    
    import { ossUpload } from '@/utils/oss'
    this.editor.config.customUploadImg = async (files, insert) => {
            const res = await ossUpload(files[0]);
            insert(res.url);
            this.$message.success("上传成功");
          };
            this.editor.config.customUploadVideo = async (files, insert) => {
            const res = await ossUpload(files[0]);
            insert(res.url);
            this.$message.success("上传成功");
          };