django项目之makedown富文本编辑器mavon editor自定义上传图片位置和删除图片
一、前端:
1、前端页面 挂载mavon editor
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="editor"> <mavon-editor style="height: 100%" v-model="editorContent" :ishljs="true" ref=md @imgAdd="imgAdd" @imgDel="imgDel" ></mavon-editor> </div>
2、前端methods方法中重写imgAdd——上传,imgDel——删除
#注意,再imgDel中要把对应位置的图片的链接发送给后端,后端进行删除,所以再我们上传图片的时候,又返回一个link,此时要把之前的img_file[pos]对应的文件对象换成这个link
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
methods:{
// 绑定@imgAdd event
imgAdd(pos, $file){
// 添加文件
var formdata = new FormData();
formdata.append("link", $file);
this.img_file[pos] = $file;
this.$axios.post(`${this.$settings.Host}/article/upload/`, formdata, {
'Content-Type': 'multipart/form-data'
}).then(response=>{
let _res = response.data;
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
this.$refs.md.$img2Url(pos, _res.link);
this.img_file[pos] = _res.link
}).catch(error=>{
this.$message.error("图片上传失败")
})
},
imgDel(pos) {
// 删除文件
this.$axios.post(`${this.$settings.Host}/article/image/delete/`,{
image_instance: this.img_file[pos]
}).catch(error=>{
this.$message.error("删除图片失败")
})
}
二、后端
1、 提供上传的接口视
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
##视图文件views.py中 class ImageUploadCreateAPIView(CreateAPIView): """后台定义前段上传图片到服务端的接口""" queryset = ArticleImage.objects.all() serializer_class = serializers.ImageUploadModelSerializer #序列化器文件中 class ImageUploadModelSerializer(serializers.ModelSerializer): """上传图片到服务端的序列化器类""" class Meta: model = ArticleImage fields = ["id", "link"] def create(self, validated_data): link = validated_data.get("link") image_instance = ArticleImage.objects.create(link=link) group = str(image_instance.link).split('/')[0] image_instance.group = group image_instance.save() return image_instance
2、提供删除的接口视图:
注意,再自定义存储的文件中,要写上delete方法,如下有,然后当数据库删除图片是,调用该方法,删除本地的图片
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#视图文件中 from renranapi.utils.fastdfs.fdfs_storage import FastDFSStorage class ImageDeleteAPIView(APIView): def post(self, request): image_instance = request.data.get("image_instance") link = image_instance.split(":")[2][5:] print("删除图片的link", link) image_instance = ArticleImage.objects.filter(link=link).delete() FastDFSStorage().delete(link) #此处是调用fastDFS的客户端删除本地物理图片 return Response({"message": "图片删除成功"}, status=status.HTTP_200_OK) #django自定义存储类的文件中要定义delete的方法,进行调用,当数据库删除的时候,删除本地文件 def delete(self, name): """ :param name: 传入的文件名 :return: 删除的文件名 """ client = Fdfs_client(self.client_conf) try: ret_delete = client.delete_file(name) return ret_delete except Exception as e: logger.warning(u'文件删除失败,错误信息:%s' % repr(e)) return None
世间安得双全法,不负如来不负卿