移動端添加圖片後在輸入框中顯示

原創

杨晓尚

2020-02-22 15:09

前言

因爲要把添加後的圖片顯示在文本框中，所以之前的輸入框無法滿足這個需求，所以就需要想想什麼文本框可以用來顯示圖片。

把div變成文本輸入框

  <div  class="txtcontent" 
        id="editer" 
        contenteditable="canEdit" 
        :v-model="accpturl" 
        v-html="innerText" 
        @focus="isLocked = true"
        @blur="isLocked = false"
        @input="changeText">
  </div>

當然了光寫這個還是達不到效果的，需要寫樣式：

/* div文本框 */
.txtcontent {
  position: absolute;
  border-radius: 6px;
  background-color: white;
  height: 250px;
  text-align: inherit;
  margin: auto;
  top: 100px;
  width: 95%;
  left: 10px;
  color: rgb(153, 166, 191);
  font-size: 13px;
  font-style: inherit;
  /* 設置字體距離頂部的距離 */
  line-height: 30px;
  /* 設置字體向右移動 */
  /* 設置字體之間的間距 */
  letter-spacing: 1px;
  overflow: auto;
  word-break: break-all;
  outline: none;
  user-select: text;
  white-space: pre-wrap;
  text-align: left;
}

上傳圖片添加到該輸入框

export default {
   name: 'txtcontent',
          props: {
          value: {
                type: String,
                default: ''
            },
          canEdit: {
                type: Boolean,
                default: true
            }
 },
data() {
return{
      // 接受url
      accpturl:'',
      // div輸入框
      innerText: this.vue,
      isLocked: false
 }
},
 watch: {
       'value'(){
                if (!this.isLocked || !this.innerText) {
                    this.innerText = this.value;
                }
            }
        },
        methods: {
            changeText(){
                this.$emit('input', this.$el.innerHTML);
            }
 },
 // 作答圖片上傳
    onRead(file) {
      var vm = this
      var formData = new FormData()
      formData.append('file', file.file)
      replyphoto(formData).then(response => {
        vm.photo1 = response.data
        this.accpturl =vm.photo1
        this.InsertImage()
        console.log(vm.photo1)
        // 判斷是否上傳多張圖片，若是，則以逗號“，”來進行拼接
        if (vm.photoList === '') {
          vm.photoList = vm.photo1
        } else {
          vm.photoList = vm.photoList + ',' + vm.photo1
        }
      })
 },

這裏需要後端寫一個接口，把該圖片轉換成http的形式返回回來。