TinyMCE图片和文件上传（阿里云）

最近项目使用了TinyMCE富文本编辑器，整体感觉很简洁，这边简单说下图片和文件上传的实现。

CDN的方法使用该编辑器

TinyMCE4.9.3

// const tinymceCDN = 'https://unpkg.com/tinymce-all-in-one@4.9.3/tinymce.min.js'
// 指向本地目录
const tinymceCDN = window.location.origin + '/tinymce/tinymce.min.js'

1.图片上传

主要参考TinyMCE中文文档，通过表单的方式上传到阿里云后返回链接给富文本编辑器。

// 图片上传，这里的blobInfo就是图片的对象，可以转换格式，后面两个是成功和失败的回调函数
        images_upload_handler: (blobInfo, success, failure) => {
          this.images_upload(blobInfo, success, failure);
        },

// 图片上传，我这里转成了FormData，并且发送post请求给后端上传阿里云返回url，把url给编辑器
    images_upload: function (blobInfo, success, failure){
      let formData = new FormData();
      // console.log(blobInfo.blob())
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      saveImgOrFile(formData)
      .then(response =>{
        success(response.url);
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    }

// 上传图片文件，我这里的request有封装的哈，自己修改
export function saveImgOrFile(params) {
  return request({
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    url: '/ops/forum/post/update/file',
    method: 'post',
    data: params
  })
}

2.文件上传

参考了这篇博客文件上传实现以及官方中文文档
主要在于要模拟一个input来添加文件，我接口与图片上传公用的。

// 文件上传
        file_picker_callback: function (callback, value, meta) {
          //文件分类
          var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
          //后端接收上传文件的路径
          var dir='';
          //为不同插件指定文件类型及后端地址
          switch(meta.filetype){
            case 'image':
              filetype='.jpg, .jpeg, .png, .gif'
              dir='img'
              break;
            case 'media':
              filetype='.mp3, .mp4'
              dir='media'
              break;
            case 'file':
            default:
          }
          //模拟出一个input用于添加本地文件
          let input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', filetype);
          input.click();
          input.onchange = function() {
            let file = this.files[0];
            let formData = new FormData();
            console.log(file);
            formData.append('file',file,file.name);
            // 这里我和图片上传是一个接口
            saveImgOrFile(formData).then(response =>{
              callback(response.url,{text: file.name});
            }).then(_=> {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            })
          }
        },

3.阿里云后端接口

controller层，路径自己改哈

// 上传文件到Oss
    @PostMapping("/update/file")
    @ResponseBody
    public Map<String,Object> upload(@RequestParam(value = "file") MultipartFile multipartFile, HttpServletRequest request) throws IOException {
        Map<String, Object> map = new HashMap<>();
        map.put("url",opsOssUploadService.uploadFile(multipartFile));
        return map;
    }

service，整个官网有整个代码和教程，我这也是复制下来的，都有备注，很简单，把自己的信息填进去，返回链接的位置要拼接好。后面抛出异常的不用看

@Service
public class OpsOssUploadService {

    // 本地上传测试
    //public static void main(String[] args) throws IOException {
    //    String s = uploadFile(new File("E://pic/1.png"));
    //    System.out.println(s);
    //}

    public String uploadFile(MultipartFile multipartFile) throws IOException {

        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = 
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = 
        String accessKeySecret = 
        // 填写Bucket名称，例如examplebucket。
        String bucketName = 
        // 填写Object完整路径，例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。
        //String objectName = filename;

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 获取文件
        //InputStream inputStream = new FileInputStream(multipartFile); // 本地文件
        InputStream inputStream = multipartFile.getInputStream();
        // 构建日期目录
        SimpleDateFormat dataFormat = new SimpleDateFormat("yyyyMMdd");
        String datePath = dataFormat.format(new Date());


        // 文件原始名
        //String realFileName = multipartFile.getName(); // 获取本地文件名
        String realFileName = multipartFile.getOriginalFilename();
        // 截取后缀
        String fileSuffix = realFileName.substring(realFileName.lastIndexOf("."));
        String fileName = UUID.randomUUID().toString();
        String newFileName = fileName+fileSuffix;
        String fileUrl = datePath+"/"+newFileName;

        try {
            String content = "Hello OSS";
            // fileUrl是文件名，inputStream传输的流文件
            ossClient.putObject(bucketName, fileUrl, inputStream);
            // 获取外链
            return "https://"+bucketName+"."+endpoint+"/"+fileUrl;
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
            return "fail";
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
            return "fail";
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }
}