mp：实现 wx-editor 图片的上传
YunaiV
parent
f48276d2bc
commit
73fac5235f
|
|
@ -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));
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
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;
|
||||
|
|
@ -49,6 +50,14 @@ public interface MpMaterialService {
|
|||
*/
|
||||
MpMaterialDO uploadPermanentMaterial(@Valid MpMaterialUploadPermanentReqVO reqVO) throws IOException;
|
||||
|
||||
/**
|
||||
* 上传图文内容中的图片
|
||||
*
|
||||
* @param reqVO 上传请求
|
||||
* @return 图片地址
|
||||
*/
|
||||
String uploadNewsImage(MpMaterialUploadNewsImageReqVO reqVO) throws IOException;
|
||||
|
||||
/**
|
||||
* 获得素材分页
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
/**
|
||||
|
|
@ -143,6 +145,23 @@ public class MpMaterialServiceImpl implements MpMaterialService {
|
|||
return material;
|
||||
}
|
||||
|
||||
@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("图片插入失败");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue