点击上传
   只能上传jpg/png文件，且不超过500kb

其实upload就是对input type="file"做了几层样式封装

一 action url

我第一个不理解的就是action中的url，我后台使用的是PHP语言，根据我之后的理解，这个url其实就是你PHP使用的上传的函数，就和form中的action一样，不一样的是我找了好久也没发现是否能修改默认的post传递方式

二 文件接收的同时，传递其他参数

方案一 url传参

对PHP提供的url进行传参，这是最直接能想到的方式，但是因为action中是post方式的，而PHP后台我使用的restful方式的url，post方式无法实现传参，我试了好几种都没能成功，也不知道要如何改成get方式

第一种方案只能放弃

方案二 不使用action

放弃action，在找了好多资料后发现可以不使用action，而是用before-upload属性，这是一个function类型的属性，默认参数是当前文件，只要能传递这个文件也能实现效果

要传递这个方法就需要new一个formdata对象，然后对这个对象追加key和value，类似于postman测试时那样

具体网上有人给的例子，差不多如下

beforeUpload (file) {
      let fd = new FormData()
      fd.append('key', file, fileName)
      axios.post(url, fd. {
        //做一些操作
      })
      return false // false就是不自动上传，我后来试了发现都一样，都不会自动上传
    },

这个感觉可以一试，然后我理所当然的写了一下的方式

beforeUpload (file,id) {
      let fd = new FormData()
      fd.append('key', file, fileName)
      axios.post(url, fd. {
        data：{
         id:id
        }
      })
      return false // false就是不自动上传，我后来试了发现都一样，都不会自动上传
    },

然后我发现无论怎么样我都只能传过去id，在PHP代码中dump(_FLIES)永远是NULL，这就非常火大了，查了好久没有解决方法，之后发现我用的Content-Type应该是multipart/form-data，而f12中调试页面是application/json; charset=utf-8，我就觉得是不是这个的问题，于是在代码中又加了headers

beforeUpload (file,id) {
        let fd = new FormData()
        fd.append('key', file, fileName)
        axios.post(url, fd. {
          data：{
           id:id
          },
          headers: {
           'Content-Type': 'multipart/form-data'
          }
        })
        return false // false就是不自动上传，我后来试了发现都一样，都不会自动上传
     },

这次报的错是axios Missing boundary in multipart/form-data，没有边界，很头疼无语

后来发现Content-Type是自动识别然后加边界的，也有人说要把Content-Type定义为undefined，还是不行，只是自动识别Content-Type，

再后来发现原来传递formdata和data不能一起传递，要传递formdata就不能有data，所以要改为

beforeUpload (file,id) {
    let fd = new FormData()
    fd.append('file', file)
    fd.append('id',id)
    axios.post(url, fd, {

    })
    return false // false就是不自动上传，我后来试了发现都一样，都不会自动上传
 },

这样就可以了

以下是我的代码

            
            将文件拖到此处，或点击上传