11月份因为工作需要去成都出差了一个星期, 工作中接触到了用vue写的web app项目, 记录一些在优化完善项目过程中遇到的问题:
1. 通过ajax上传附件--向后端发送数据的格式设置:
使用了原生的web api (FormData) 创建了一个formdata对象
var formdata = new FormData(); formdata.append('username', 'allen2001'); formdata.append('phone', '13989897452'); ...
把需要传给后台的一些必要表单字段同时也添加到formdata对象中，然后要把文件对象也放入到formdata中，注意如果是同时上传多个文件，则需要从装有file对象的数组中循环遍历地依次添加到formdata对象里
// 文件对象数组 this.fileList.forEach((item) => { formdata.append('file', item) }) // ajax axios.post('/upload', formdata)
上图代码中‘file'为后端接受文件对象的字段名
2. 前端显示待上传图片的预览
也使用了原生的web api (FileReader) 创建了一个FileReader对象
<body> <div> <input id="file" type="file"> <div class="show"> <img id="img1" src="" alt=""> </div> </div> <!-- js --> <script type="text/javascript"> var fileInput = document.getElementById('file'); var img = document.getElementById('img1'); fileInput.onchange = function() { // console.log(this.files) var file = this.files[0] var reader = new FileReader() reader.onload = function(ev) { // console.log(ev.target) img.src = ev.target.result } // 以DataURL的形式读取文件 reader.readAsDataURL(file) } </script> </body>
把图片转化为base64的地址进行读取