django项目之makedown富文本编辑器mavon editor自定义上传图片位置和删除图片

一、前端：                                                                                                       

　　1、前端页面 挂载mavon editor                                                                              

<div id="editor">
        <mavon-editor
          style="height: 100%"
          v-model="editorContent"
          :ishljs="true"
          ref=md
          @imgAdd="imgAdd"
          @imgDel="imgDel"
        ></mavon-editor>
      </div>

View Code

　　2、前端methods方法中重写imgAdd——上传，imgDel——删除                                      

　　　　#注意，再imgDel中要把对应位置的图片的链接发送给后端，后端进行删除，所以再我们上传图片的时候，又返回一个link，此时要把之前的img_file[pos]对应的文件对象换成这个link

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("删除图片失败")
            })
        }

View Code

　　

二、后端                                                                                                        

　　1、 提供上传的接口视                                                                               

##视图文件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

View Code

　　2、提供删除的接口视图：                                                                                      

　　注意，再自定义存储的文件中，要写上delete方法，如下有，然后当数据库删除图片是，调用该方法，删除本地的图片

#视图文件中
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

View Code