wangeditor上传oss

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("上传成功");
      };

最后

以上就是健忘哈密瓜为你收集整理的wangeditor上传oss的全部内容，希望文章能够帮你解决wangeditor上传oss所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。