vue

这两周给自己的开源项目极客微博加上了发微博带图片的功能（作为一个“微博”app，怎么能没有发图片微博的功能呢？）。没想到，做这个小功能的折腾程度，超出了我的预期。 其实如果是纯Rails MVC，那么给微博加上图片功能，简直不要太简单。后端两行核心代码： # tweet.rb has_many_attached :images ​ # tweet_controller.rb params.require(:tweet).permit(:body, images: []) 然后前端相关的template 文件里面，相应的加上文件选择控件，和显示图片的相关代码就搞定了，毕竟ActiveStorage什么都帮你做好了。 可是极客微博前端用了Vue。发微博的时候，是通过前端发POST Ajax请求的方式发的，所以事情就变得复杂了。首先，你没有办法像文本字段一样，给json body加一个file字段，然后POST给后端。所以想要在前端用Ajax发请求上传图片，就剩下两种办法： 在前端先把图片上传到图片存储服务（我用的是阿里云OSS），拿到上传后的图片url，然后把url传给后端。 使用FormData。这是经过一些搜索，以及在微信群里面请教后，得到的方案。 我不是特别想使用第一种方式，原因有多个。其一，这种方式的实现成本不小，这个可以在Rails ActiveStorage的官方文档里面了解到。其二，这种方式的用户体验也不是很好，因为上传需要一个过程，如果上传的图片比较大的话，用户等待的时间就会有点长。先压缩再上传？那又增加了一点工作量。最后，如果用户想换一张图片的话，那之前的上传和等待就都浪费了。出于这几点考虑，我决定使用第二种方式。 但是使用FormData，其实就相当于使用表单提交的方式发请求。出于安全考虑，为了防止CSRF攻击，Rails默认需要验证表单提交的请求的CSRF token。在使用 form_for, form_with这些rails view helper构造表单的时候，rails会自动生成csrf tag field，然后在表单提交的时候，自动带上这个field。然而现在，我们的表单是自己构造的（记住这里，后面要考），不是使用Rails的view…