关于javascript:JS-上传图片单张

56次阅读

共计 1619 个字符，预计需要花费 5 分钟才能阅读完成。

<!-- HTML -->

<div id="test1">
 <input type="file" name="image" accept="image/*" @change='onchangeImgFun1' class="layui-btn" style="opacity: 0;height: 150px;position: relative;z-index: 1;">
   <img v-show="isZheng" id="demo1" :src='sfz1' ref="demo1pic"
 style="position:absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0); width:100%; height: 200px;border-radius: 5px;" />
</div>
<div id="test2">
 <input type="file" name="image" accept="image/*" @change='onchangeImgFun2'
 class="layui-btn" style="opacity: 0;height: 150px;position: relative;z-index: 1;">
   <img v-show="isFan" id="demo2" :src='sfz2' ref="demo2pic"
 style="position:absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0); width:100%;height: 200px;border-radius: 5px;" />
</div>

new Vue({
   el: '#shop',
   data() {
      return {
        isZheng:false,
        isFan:false,
        sfz1:'',
        sfz2:'',
      }
   },
   methods: {
      // 上传图片
 onchangeImgFun1: function (e) {var file = e.target.files[0];
         console.log(file)
         let formData = new FormData();
         formData.append('file', file);
         axios.post('/nineth_app/storage/store?fileType=0',formData,{
            headers: {
               Authorization: this.toke,
               Accept: 'application/json',
            }
         }).then((res) => {if (res.code == 1) {$('#demo1').attr("src", '');
               return alert('上传失败');
            }
            // 上传胜利
 if (res.code == 0) {
               this.isZheng = true;
               this.sfz1 = res.data
            }
         }).catch();},
      onchangeImgFun2: function (e) {var file = e.target.files[0];
         console.log(file)
         let formData = new FormData();
         formData.append('file', file);
         axios.post('/nineth_app/storage/store?fileType=0',formData,{
            headers: {
               Authorization: this.toke,
               Accept: 'application/json',
            }
         }).then((res) => {if (res.code == 1) {$('#demo2').attr("src", '');
               return alert('上传失败');
            }
            // 上传胜利
 if (res.code == 0) {
               this.isFan = true;
               this.sfz2 = res.data
            }
         }).catch();},
     
   },
   mounted() {}
})

正文完