js上传图片功能

王懿诺

已于 2022-02-22 20:07:43 修改

阅读量227

点赞数

分类专栏： html功能组件文章标签： javascript 前端 css

于 2022-01-22 23:27:59 首次发布

本文链接：https://blog.csdn.net/TodayStartWJH/article/details/122645719

版权

html功能组件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文将详细介绍如何使用JavaScript在前端实现图片上传功能，包括文件选择、预览、进度显示和上传到服务器的基本步骤，同时涉及CSS美化上传组件的技巧。

摘要由CSDN通过智能技术生成

/* 上传图片 */
.upload-pictures-warp {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
}

.upload-pictures-warp-content {
  border: 1px solid #cccccc;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.upload-pictures-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  opacity: 0;
  cursor: pointer;
}

.upload-pictures-img {
  width: 300px;
  height: 300px;
  border: 1px solid skyblue;
  margin-top: 27px;
  vertical-align: bottom;
}
.add-check{
  margin-bottom: 0 !important;
  margin-left: 14px;
}

<div class="form-group">
   <label class="col-sm-2 control-label">图片</label>
   <div class="col-sm-10">
       <div id="upload-pictures-warp isShow">
           <div v-if="flag != 0" class="upload-pictures-warp-content">点击上传</div>
           <input type="file" @change='uploadPhoto' class="upload-pictures-input"
               name="file" />
           <img :src="detailForm.img" class="upload-pictures-img" />
           <div @click="check(detailForm.img)" class="btn btn-warning btn-sm add-check"><i
               class="glyphicon glyphicon-eye-open"></i>
           预览 </div>
       </div>
   </div>
</div>

// 图片格式
function isAssetTypeAnImage(ext) {
	return (
		[
			'png',
			'jpg',
			'jpeg',
			'bmp',
			'gif',
			'webp',
			'psd',
			'svg',
			'tiff',
		].indexOf(ext.toLowerCase()) !== -1
	)
}



  created() {
 // 只有添加的时候才不可以调详情接口
         if (flag == 0 || flag == 1) {
             this.getBannerDetails()
         }
         if (flag == 0) {
             //查看页面的时候 设置按钮不可用，背景为灰色
             $('.isShow').css('background', '#cccccc !important').prop("disabled", true);
         }
     },

	//上传图片
    uploadPhoto(e) {
        var that = this
        var photoFile = e.target.value
        //获取最后一个.的位置
        var index = photoFile.lastIndexOf(".");
        //获取后缀
        var ext = photoFile.substr(index + 1);
        if (isAssetTypeAnImage(ext) != true) {
            alert("图片格式不正确");
            return;
        }

        var files = new FormData()
        files.append('file', e.currentTarget.files[0])

        axios({
            method: "POST",
            url: 'https://api.dongjinyu.com/common/file/upload',
            data: files,
            headers: {
                // 'Content-Type': 'application/json'
            }
        }).then(function (res) {
            if (res.status === 200) {
                var ret = res.data;
                switch (ret.code) {
                    case 200:
                        that.detailForm.img = ret.data
                        break;
                    case 500:
                        if (typeof err === 'function') {
                            alert(ret)
                        } else {
                            alert(ret.msg)
                        }
                        break;
                    case 401:
                        break;
                }
            } else {
                console.error('network error', res);
            }
        })

    },
}