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>

 

　　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("刪除圖片失敗")
            })
        }

　　

二、后端                                                                                                        

　　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

　　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