Ant Design of Vue 使用a-upload 自定义上传路径,前后端报403问题
话不多说,上代码
vue html部分
<a-upload
v-decorator="[
'imgSrc',
{
rules: [{ required: true, message: '请上传照片' }],
},
]"
action="/face/file/upload"
list-type="picture-card"
:file-list="fileList"
:remove="handleRemove"
@preview="handlePreview"
@change="handleChange"
>
js部分
async handlePreview (file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj)
}
this.imgSrc = file.url || file.preview
this.previewVisible = true
},
handleRemove (file) {
const index = this.fileList.indexOf(file)
const newFileList = this.fileList.slice()
newFileList.splice(index, 1)
this.fileList = newFileList
this.imgSrc = ''
},
handleChange ({ fileList }) {
this.imgSrc = fileList[0].thumbUrl
this.fileList = fileList
},
java后端
@RestController
@RequestMapping("/file")
public class FileUpload {
@PostMapping("/upload")
public JSONObject test(@RequestParam MultipartFile file){
JSONObject result = new JSONObject();
result.put("name","xxx.png");
result.put("status","done");
result.put("thumbUrl","https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
result.put("url","https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
return result;
}
}
到这里就是整个流程,但是运行后发现上传路径报403
网友回答需要进行如下处理
标签中添加 header并设置为空
<a-upload
v-decorator="[
'imgSrc',
{
rules: [{ required: true, message: '请上传照片' }],
},
]"
action="/lhsmface/file/upload"
:headers="headers" 这里添加headers,在下图data中添加headers
list-type="picture-card"
:file-list="fileList"
:remove="handleRemove"
@preview="handlePreview"
@change="handleChange"
>
data () {
return {
headers: {}
}
},
springboot添加跨域配置类
import com.lhsm.facefactory.common.RequestJsonHandlerMethodArgumentResolver;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.StringHttpMessageConverter;
import org.springframework.web.method.support.HandlerMethodArgumentResolver;
import java.nio.charset.Charset;
import java.util.List;
/**
* @ Author :AZY.
* @ Date :Created in 14:38 2020/9/24
* @ Description:${DESCRIPTION}
*/
@Configuration
@SuppressWarnings("deprecation")
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {
argumentResolvers.add(new RequestJsonHandlerMethodArgumentResolver());
}
@Bean
public HttpMessageConverter<String> responseBodyConverter() {
return new StringHttpMessageConverter(Charset.forName("UTF-8"));
}
@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
super.configureMessageConverters(converters);
converters.add(responseBodyConverter());
}
// 控制跨域
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
}
}
一套组合拳下来,应该就可以正常使用了,照片也不会被红框包围
版权声明:本文为weixin_42132048原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END