技術標籤：vue前端

<el-input
        class="textarea"
        size="small"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="請輸入內容"
        v-model="comment"
        maxlength="1000"
        show-word-limit
 

        resize="none"
        @paste.native="handlePasting"
        :disabled="!available"
        @keyup.ctrl.enter.native="handleSendMsg"
      ></el-input>

這裡注意clipboardData物件，嘗試了很多方法發現只能貼上截圖（可能是瀏覽器限制的問題，所以不能複製貼上電腦中的檔案）
有興趣的可以參考官網https://w3c.github.io/clipboard-apis/#widl-ClipboardEvent-clipboardData

// 貼上時進行處理
    handlePasting(e) {
      let clipboardData = e.clipboardData || window.clipboardData; //相容瀏覽器
      let file = e.clipboardData.files[0];
      console.log("e.clipboardData.types...", e.clipboardData.types);
      if (file) {
        this.uploadPlateDialogVisible =
 
 true;
        this.filePlate = e.clipboardData.files[0];
      } else {
      }
    },

在使用者確定要傳送時再進行傳送操作，當然也可以在ctrl+v時就進行傳送操作

// 上傳剪下的圖片
    handleUploadPlate() {
      let param = new FormData(); //建立form物件
      param.append("files", this.filePlate);
      param.append("task_id", this.taskId);
      param.append("user_id", this.$store.state.userInfo.user_id);
      param.append("system", this.system);
      param.append("type", "image");
      param.append("message", this.picdesc);
      console.log(this.filePlate);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }, //這裡是重點，需要和後臺溝通好請求頭，Content-Type不一定是這個值
      }; //新增請求頭
      this.$axios
        .post("/project/api/v1/insert_file_into_message", param, config)
        .then((res) => {
          this.uploadPlateDialogVisible = false;
          this.$emit("updateDiag");
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.picdesc = "";
        });
    },