移动端添加图片后在输入框中显示

前言

因为要把添加后的图片显示在文本框中，所以之前的输入框无法满足这个需求，所以就需要想想什么文本框可以用来显示图片。

把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的形式返回回来。

效果