前端上传图片

一、图片的上传

在上传图片的时候首先测一下后端给的地址是否畅通！通过postman进行测试！具体操作如下图：

测试成功的话，下面会有后端返回的数据。

二、但是前端是怎么进行上传的呢？

主要有两种，一种是表单上传，另一种是axios发送请求上传

(一)、表单上传

		// action 就是上传的路径（图片没有跨域，不用写/api..... 直接写后端地址） method 是上传的方式，一般是post方式
<form action="http://localhost:3000/file/upfile"method="post" enctype="multipart/form-data">
        <h2>单图上传</h2>
        //name就是上传图片的key，给发的图片起的名字！！必须写
        <input type="file" name="logo">
        <input type="submit" value="提交">
    </form>

enctype="multipart/form-data 传统写法的时候没有这个代码，但是在表单上传图片的时候，必须写 enctype="multipart/form-data

（二）、axios方式上传图片

使用axios方式上传图片，首先必须封装一个上传图片的axios请求，在api文件封装，代码如下：

export function uplink(data){
     console.log(data)
     return new Promise((resolve,reject)=>{
         service.request({
             url:url.shop,
             method:"post",
             data,//上传图片的信息
             cache: false, //不必须不从缓存中读取
             processData: false,//必须处理数据 上传文件的时候，则不需要把其转换为字符串，因此要改成false
             contentType: false,//必须 发送数据的格式
         }).then((ok)=>{
            resolve(ok)
         }).catch((err)=>{
            reject(err)
         })
     })
 }

封装的发送图片的请求 与 普通请求的不同点就是 添了几个条件，如下图所示！ 10 11 12 行！

封装好了请求，在组件中发送请求，实例代码如下：

axios方式发送数据
	// ref是起的名字，在下面获取图片的时候用
  <input type="file" ref="file" id="file">
  <button @click="upfun()">点我上传图片</button>

 upfun(){
              var el=this.$refs.file.files[0]//files得到当前图片
             var formdata=new FormData()//创建出formdata对象（异步上传文件）
            formdata.append("logo",el)//添加上传文件的key 和后台接受的key要相同 el就是当前得到的图片 
            // 调用封装的数据请求
            uplink(formdata).then((ok)=>{
                console.log(ok)
            })
        }