APP社交類專案設計之四使用者頭像設計開發
使用者基本資訊設定還包含使用者頭像上傳下載。本APP中，作者使用了阿里雲OSS儲存伺服器（目前可以免費申請）作為檔案伺服器管理頭像資源，因此本地後臺伺服器呼叫了該SDK包。如下為阿里雲OSS儲存伺服器後臺介面，實際使用過程中需要先建立BUCKET，例如名稱為poss. 建立好了就可以如下圖所示。
該BUCKET可以理解為阿里雲上的一個區域，這個區域不僅有對應的阿里公網訪問IP地址，還有訪問金鑰，BUCKET可建立資料夾和檔案進行儲存，上傳下載操作。
建立好了後，在本地伺服器後臺工程（SPRING+ SPRING MVC + MYBATIS）的applicationContext.xml中配置阿里雲BUCKET如下引數
<property name="accessKeyId" value="XXXXX" />
<property name="accessKeySecret" value="XXXXX" />
<property name="endpoint" value="http://oss-cn-beijing.aliyuncs.com" />
<property name="bucketName" value="poss" />
在社交APP中，後臺伺服器給前臺移動端提供瞭如下介面用於改變使用者的基本屬性，其中avator為使用者頭像檔案
後臺伺服器對應程式碼
/**
* 修改我的資料
* @return
*/
@RequestMapping(value="/modify",method=RequestMethod.POST)
@ResponseBody
@ApiOperation("修改我的資料")
public Result modifyUserInfo(ModifyUserParam param, @RequestParam(value = "avator",required=false) @ApiParam("使用者頭像") MultipartFile fileUpload){
String id = param.getId();
String nickname = param.getNickname();
String sex = param.getSex();
String birth = param.getBirth();
String scope = param.getScope();
String intro = param.getIntro();
User user=this.userService.selectByPrimaryKey(id);
if (user == null) {
result.setStatus(Result.FAILED);
result.setTipCode("visitorNotExist");
result.setTipMsg("不存在該使用者");
return result;
}
if(nickname!=null)
{
user.setNickname(nickname);
}
if(sex!=null)
{
user.setSex(sex);
}
if(birth!=null)
{
user.setBirth(birth);
}
if(scope!=null)
{
user.setScope(scope);
}
if(intro!=null)
{
user.setIntro(intro);
}
if(fileUpload!=null)
{
//使用者圖片上傳
ImageResult pictureResult;
try {
logger.info("開始提交圖片");
pictureResult =fileService.uploadPic(fileUpload,"");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
result.setStatus(Result.FAILED);
result.setTipCode("error");
result.setTipMsg("圖片上傳錯誤");
return result;
}
logger.info("提交圖片成功"+pictureResult.getData());
if(pictureResult.getStatus().equals(Result.SUCCESS))
{
user.setAvator(pictureResult.getData());
}
else
{
logger.info("沒有圖片");
result.setStatus(Result.FAILED);
result.setTipCode("error");
result.setTipMsg("圖片上傳失敗，請重新上傳");
return result;
}
}
if(this.userService.updateByPrimaryKeySelective(user)!=1){
result.setStatus(Result.FAILED);
result.setTipCode("updateError");
result.setTipMsg("修改失敗");
return result;
}
result.setData(user);
return result;
}
在如上程式碼中還呼叫了一些方法（本文暫未貼出）來設定檔案上傳模式。這個設定是必須的，如果不設定則後臺上傳到阿里雲OSS伺服器上的圖片後，阿里雲返回的地址通過瀏覽器訪問是預設連結開啟，
原問題：[求助]為啥在oss裡的圖片，瀏覽器點選圖片不是直接開啟而是下載了？！
連結地址：
注意：原貼中給出的解決方式是通過設定域名關聯到阿里雲圖片伺服器ENDPOINT域名的方式是錯誤的。本文中參考了上述方法並未解決問題，實際上只需要在後臺伺服器程式碼中設定上傳檔案的contentType 就可以解決
解決方法：後臺伺服器程式碼關鍵語句
ObjectMetadata meta = new ObjectMetadata();
//指定該Object檔案型別，預設值application/octet-stream
meta.setContentType(getContentType(filename));
/**
* 通過檔名判斷並獲取OSS服務檔案上傳時檔案的contentType
* @param fileName 檔名
* @return 檔案的contentType
*/
public static String getContentType(String fileName){
//檔名字尾
String fileExtension = fileName.substring(fileName.lastIndexOf("."));
if(".bmp".equalsIgnoreCase(fileExtension)) {
return "image/bmp";
}
if(".gif".equalsIgnoreCase(fileExtension)) {
return "image/gif";
}
if(".jpeg".equalsIgnoreCase(fileExtension) || ".jpg".equalsIgnoreCase(fileExtension) || ".png".equalsIgnoreCase(fileExtension) ){
return "image/jpeg";
}
if(".html".equalsIgnoreCase(fileExtension)){
return "text/html";
}
if(".txt".equalsIgnoreCase(fileExtension)){
return "text/plain";
}
if(".vsd".equalsIgnoreCase(fileExtension)){
return "application/vnd.visio";
}
if(".ppt".equalsIgnoreCase(fileExtension) || "pptx".equalsIgnoreCase(fileExtension)) {
return "application/vnd.ms-powerpoint";
}
if(".doc".equalsIgnoreCase(fileExtension) || "docx".equalsIgnoreCase(fileExtension)) {
return "application/msword";
}
if(".xml".equalsIgnoreCase(fileExtension)) {
return "text/xml";
}
return "image/jpeg";
}
功能實現後，阿里雲OSS儲存伺服器上可以看到對應的上傳圖片，預覽中可以直接看到
如果有阿里雲OSS上傳下載程式碼DEMO需要，可直接聯絡本文作者