mp：实现 wx-editor 图片的上传

YunaiV
1 parent f48276d2
Showing 6 changed files with 73 additions and 7 deletions
yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/MpMaterialController.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/vo/MpMaterialUploadNewsImageReqVO.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/material/MpMaterialService.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/material/MpMaterialServiceImpl.java
yudao-ui-admin/src/views/mp/components/wx-editor/WxEditor.vue
@@ -33,6 +33,7 @@ public interface ErrorCodeConstants {
  
     // ========== 公众号素材 1006004000============
     ErrorCode MATERIAL_UPLOAD_FAIL = new ErrorCode(1006004000, "上传素材失败，原因：{}");
+    ErrorCode MATERIAL_IMAGE_UPLOAD_FAIL = new ErrorCode(1006004000, "上传图片失败，原因：{}");
  
     // ========== 公众号消息 1006005000============
     ErrorCode MESSAGE_SEND_FAIL = new ErrorCode(1006005000, "发送消息失败，原因：{}");
@@ -20,6 +20,8 @@ import java.io.IOException;
  
 import static cn.iocoder.yudao.framework.common.pojo.CommonResult.success;
  
+// TODO @芋艿：权限
+
 @Api(tags = "管理后台 - 公众号素材")
 @RestController
 @RequestMapping("/mp/material")
@@ -45,6 +47,13 @@ public class MpMaterialController {
         return success(MpMaterialConvert.INSTANCE.convert(material));
     }
  
+    @ApiOperation("上传图文内容中的图片")
+    @PostMapping("/upload-news-image")
+    public CommonResult<String> uploadNewsImage(@Valid MpMaterialUploadNewsImageReqVO reqVO)
+            throws IOException {
+        return success(mpMaterialService.uploadNewsImage(reqVO));
+    }
+
     @ApiOperation("获得素材分页")
     @GetMapping("/page")
     public CommonResult<PageResult<MpMaterialRespVO>> getMaterialPage(@Valid MpMaterialPageReqVO pageReqVO) {
@@ -52,4 +61,5 @@ public class MpMaterialController {
         return success(MpMaterialConvert.INSTANCE.convertPage(pageResult));
     }
  
+
 }
+package cn.iocoder.yudao.module.mp.controller.admin.material.vo;
+
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+import org.springframework.web.multipart.MultipartFile;
+
+import javax.validation.constraints.NotNull;
+
+@ApiModel("管理后台 - 公众号素材上传图文内容中的图片 Request VO")
+@Data
+public class MpMaterialUploadNewsImageReqVO {
+
+    @ApiModelProperty(value = "公众号账号的编号", required = true, example = "2048")
+    @NotNull(message = "公众号账号的编号不能为空")
+    private Long accountId;
+
+    @ApiModelProperty(value = "文件附件", required = true)
+    @NotNull(message = "文件不能为空")
+    @JsonIgnore // 避免被操作日志，进行序列化，导致报错
+    private MultipartFile file;
+
+}
@@ -2,6 +2,7 @@ package cn.iocoder.yudao.module.mp.service.material;
  
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialPageReqVO;
+import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadNewsImageReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadPermanentReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO;
 import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO;
@@ -50,6 +51,14 @@ public interface MpMaterialService {
     MpMaterialDO uploadPermanentMaterial(@Valid MpMaterialUploadPermanentReqVO reqVO) throws IOException;
  
     /**
+     * 上传图文内容中的图片
+     *
+     * @param reqVO 上传请求
+     * @return 图片地址
+     */
+    String uploadNewsImage(MpMaterialUploadNewsImageReqVO reqVO) throws IOException;
+
+    /**
      * 获得素材分页
      *
      * @param pageReqVO 分页请求
@@ -7,6 +7,7 @@ import cn.hutool.core.util.StrUtil;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.module.infra.api.file.FileApi;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialPageReqVO;
+import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadNewsImageReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadPermanentReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO;
 import cn.iocoder.yudao.module.mp.convert.material.MpMaterialConvert;
@@ -31,6 +32,7 @@ import java.util.Collection;
 import java.util.List;
  
 import static cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil.exception;
+import static cn.iocoder.yudao.module.mp.enums.ErrorCodeConstants.MATERIAL_IMAGE_UPLOAD_FAIL;
 import static cn.iocoder.yudao.module.mp.enums.ErrorCodeConstants.MATERIAL_UPLOAD_FAIL;
  
 /**
@@ -144,6 +146,23 @@ public class MpMaterialServiceImpl implements MpMaterialService {
     }
  
     @Override
+    public String uploadNewsImage(MpMaterialUploadNewsImageReqVO reqVO) throws IOException {
+        WxMpService mpService = mpServiceFactory.getRequiredMpService(reqVO.getAccountId());
+        File file = null;
+        try {
+            // 写入到临时文件
+            file = FileUtil.newFile(FileUtil.getTmpDirPath() + reqVO.getFile().getOriginalFilename());
+            reqVO.getFile().transferTo(file);
+            // 上传到公众号
+            return mpService.getMaterialService().mediaImgUpload(file).getUrl();
+        } catch (WxErrorException e) {
+            throw exception(MATERIAL_IMAGE_UPLOAD_FAIL, e.getError().getErrorMsg());
+        } finally {
+            FileUtil.del(file);
+        }
+    }
+
+    @Override
     public PageResult<MpMaterialDO> getMaterialPage(MpMaterialPageReqVO pageReqVO) {
         return mpMaterialMapper.selectPage(pageReqVO);
     }
@@ -6,7 +6,7 @@
   <div id="wxEditor">
     <div v-loading="quillUpdateImg" element-loading-text="请稍等，图片上传中">
       <!-- 图片上传组件辅助-->
-      <el-upload class="avatar-uploader" name="file" :action="serverUrl" :headers="header"
+      <el-upload class="avatar-uploader" name="file" :action="actionUrl" :headers="headers"
                  :show-file-list="false" :data="uploadData"
                  :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload">
       </el-upload>
@@ -95,7 +95,7 @@ export default {
           }
         }
       },
-      serverUrl: process.env.VUE_APP_BASE_API +'/wxmaterial/newsImgUpload', // 这里写你要上传的图片服务器地址
+      actionUrl: process.env.VUE_APP_BASE_API +'/admin-api/mp/material/upload-news-image', // 这里写你要上传的图片服务器地址
       headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
     }
   },
@@ -107,31 +107,34 @@ export default {
  
     // 富文本图片上传前
     beforeUpload() {
-      // 显示loading动画
+      // 显示 loading 动画
       this.quillUpdateImg = true
     },
  
+    // 图片上传成功
+    // 注意！由于微信公众号的图片有访问限制，所以会显示“此图片来自微信公众号，未经允许不可引用”
     uploadSuccess(res, file) {
       // res为图片服务器返回的数据
       // 获取富文本组件实例
       let quill = this.$refs.myQuillEditor.quill
       // 如果上传成功
-      if(res.link){
+      const link = res.data
+      if (link){
         // 获取光标所在位置
         let length = quill.getSelection().index;
         // 插入图片  res.info为服务器返回的图片地址
-        quill.insertEmbed(length, 'image', res.link)
+        quill.insertEmbed(length, 'image', link)
         // 调整光标到最后
         quill.setSelection(length + 1)
       } else {
         this.$message.error('图片插入失败')
       }
-      // loading动画消失
+      // loading 动画消失
       this.quillUpdateImg = false;
     },
     // 富文本图片上传失败
     uploadError() {
-      // loading动画消失
+      // loading 动画消失
       this.quillUpdateImg = false;
       this.$message.error("图片插入失败");
     }